/* Cenmax Magento illustration. All component styles are scoped to .cmmag. */
.cmmag { --cmmag-ink:#302848; --cmmag-muted:#726b86; --cmmag-violet:#7950cc; position:relative; isolation:isolate; container-type:inline-size; width:100%; max-width:860px; margin:0 auto; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--cmmag-ink); line-height:1.4; }
.cmmag *, .cmmag *::before, .cmmag *::after { box-sizing:border-box; }
.cmmag svg { display:block; width:100%; height:auto; }
.cmmag__toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 16px; }
.cmmag__eyebrow { font-size:10px; font-weight:750; letter-spacing:.15em; color:#795ca8; }
.cmmag__motion { display:flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #ddd5ef; border-radius:20px; background:#fff; color:#615471; font-size:11px; cursor:pointer; }
.cmmag__pause { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.cmmag__pause:focus-visible ~ .cmmag__toolbar .cmmag__motion { outline:3px solid #7950cc; outline-offset:3px; }
.cmmag__pause:checked ~ .cmmag__toolbar .cmmag__motion { background:#ebe3fa; border-color:#aa8bdc; }
.cmmag__pause:checked ~ .cmmag__scene *, .cmmag__pause:checked ~ .cmmag__scene *::before, .cmmag__pause:checked ~ .cmmag__scene *::after { animation-play-state:paused !important; }
.cmmag__scene { position:relative; padding:110px 13% 116px; }
.cmmag__orbit { position:absolute; z-index:-2; inset:0; border-radius:45%; background:radial-gradient(ellipse at 50% 60%, #e9e0fa 0%, #f0edff 40%, #f5f8ff 60%, transparent 73%); }
.cmmag__orbit::before { content:""; position:absolute; inset:8% 6%; border:1px solid #e4dcf4; border-radius:50%; transform:rotate(-15deg); }
.cmmag__network { position:absolute; z-index:-1; inset:0; height:100% !important; }
.cmmag__wires { stroke:#d8ccec; stroke-width:1.5; }
.cmmag__signals { stroke:#9e80dc; stroke-width:3; stroke-linecap:round; stroke-dasharray:5 95; animation:cmmag-flow 12s linear infinite; }
.cmmag__edge { display:flex; align-items:center; gap:10px; position:absolute; top:20px; left:50%; transform:translateX(-50%); padding:12px 18px; border:1px solid #ded6ee; border-radius:16px; background:#fff; box-shadow:0 8px 24px #61469a0c; white-space:nowrap; }
.cmmag__edge > svg { width:29px; stroke:#8261c0; stroke-width:1.3; }
.cmmag__edge strong { display:block; font-size:12px; }
.cmmag__edge div > span { display:block; font-size:10px; color:var(--cmmag-muted); }
.cmmag__packet { width:7px; height:7px; margin-left:5px; border-radius:50%; background:#9773da; box-shadow:0 0 0 5px #f0eafa; animation:cmmag-pulse 4s ease-in-out infinite; }
.cmmag__catalog { position:relative; z-index:2; border:1px solid #ddd5ec; border-radius:15px; background:#fff; box-shadow:0 24px 45px -22px #4d327d55, 0 4px 12px #4834660a; transform:perspective(1200px) rotateY(-5deg) rotateX(3deg); animation:cmmag-hover 9s ease-in-out infinite; }
.cmmag__browser { display:flex; align-items:center; gap:10px; min-height:35px; padding:9px 13px; background:#fcfbff; border-radius:15px 15px 0 0; border-bottom:1px solid #eee9f5; font-size:9px; color:#7c718c; }
.cmmag__dots { display:flex; gap:4px; }
.cmmag__dots i { width:5px; height:5px; border-radius:50%; background:#d6c9e8; }
.cmmag__dots i:first-child { background:#aa8fd7; }
.cmmag__demo { margin-left:auto; font-size:7px; letter-spacing:.07em; font-weight:700; color:#74608d; }
.cmmag__shop { padding:18px 22px 0; }
.cmmag__navigation { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cmmag__navigation > strong { display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:-.03em; }
.cmmag__brandmark { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:#8a68c9; color:#fff; font-family:Georgia,serif; font-size:23px; font-weight:400; }
.cmmag__navigation > svg { width:17px; stroke:#827290; stroke-width:1.6; }
.cmmag__headline { padding:23px 0 20px; }
.cmmag__headline > span { font-size:8px; letter-spacing:.13em; color:#8a729f; font-weight:700; }
.cmmag__headline > strong { display:block; margin-top:5px; font-size:clamp(22px, 3.4cqi, 30px); letter-spacing:-.055em; line-height:1.15; }
.cmmag__headline p { margin:7px 0 0; font-size:10px; color:var(--cmmag-muted); }
.cmmag__catalog-body { display:grid; grid-template-columns:100px minmax(0, 1fr); gap:17px; }
.cmmag__filters { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-right:12px; border-right:1px solid #eee9f5; font-size:8px; color:#83798f; }
.cmmag__filters > span:first-child, .cmmag__filters > span:nth-of-type(5), .cmmag__filters > span:nth-of-type(6) { font-size:7px; font-weight:700; letter-spacing:.08em; }
.cmmag__filters > strong { display:flex; justify-content:space-between; width:100%; color:#7950cc; }
.cmmag__filters i { font-style:normal; }
.cmmag__filters hr { border:0; border-top:1px solid #ece6f4; width:100%; margin:1px 0; }
.cmmag__swatches, .cmmag__variant { display:flex; gap:5px; }
.cmmag__swatches i { width:13px; height:13px; border-radius:50%; background:#c1abd9; border:2px solid #fff; outline:1px solid #e6def0; }
.cmmag__swatches i:nth-child(2) { background:#a4bde2; }
.cmmag__swatches i:nth-child(3) { background:#d2c4b1; }
.cmmag__filter-option::before { content:""; display:inline-block; width:7px; height:7px; border:1px solid #d2c7df; border-radius:2px; margin-right:5px; }
.cmmag__products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:start; }
.cmmag__product { min-width:0; }
.cmmag__art { position:relative; border-radius:9px; overflow:hidden; background:#f4eff9; }
.cmmag__art--lamp { background:#edf3fc; }
.cmmag__art--vase { background:#f0ebf7; }
.cmmag__art > span { position:absolute; top:8px; left:8px; font-size:6px; letter-spacing:.08em; color:#776887; font-weight:700; }
.cmmag__object { animation:cmmag-object 8s ease-in-out infinite; }
.cmmag__product:nth-child(2) .cmmag__object { animation-delay:-3s; }
.cmmag__product:nth-child(3) .cmmag__object { animation-delay:-5s; }
.cmmag__product > strong { display:block; margin-top:8px; font-size:9px; }
.cmmag__product > span { display:block; margin-top:2px; font-size:8px; color:var(--cmmag-muted); }
.cmmag__variant { margin-top:7px; }
.cmmag__variant i { width:6px; height:6px; background:#c7b69f; border-radius:50%; }
.cmmag__variant i:nth-child(2) { background:#b1a2bf; }
.cmmag__variant i:nth-child(3) { background:#7d8395; }
.cmmag__variant--blue i:first-child { background:#9cb9e7; }
.cmmag__variant--violet i:first-child { background:#b5a0d7; }
.cmmag__shop-footer { display:flex; align-items:center; gap:6px; margin-top:19px; padding:11px 0; border-top:1px solid #eee9f5; font-size:10px; }
.cmmag__magento-mark { font-size:24px; line-height:1; color:#8260bd; }
.cmmag__shop-footer > span:last-child { margin-left:auto; font-size:8px; color:#80718f; }
.cmmag__platform { position:absolute; z-index:0; width:68%; height:89px; left:16%; bottom:45px; transform:skewY(-3deg); }
.cmmag__platform > div { height:36px; border:1px solid #d4c6ee; border-radius:10px; margin-top:-10px; background:linear-gradient(110deg, #e9e0fa, #f5f1ff 55%, #e0e8fa); box-shadow:0 5px 0 #ded3ef; }
.cmmag__platform > div:last-child { display:flex; justify-content:space-between; align-items:center; padding:0 22px; color:#9276b7; font-size:8px; letter-spacing:.18em; }
.cmmag__lights { display:flex; gap:5px; }
.cmmag__lights i { width:5px; height:5px; background:#a582d6; border-radius:50%; animation:cmmag-pulse 4s ease-in-out infinite; }
.cmmag__lights i:nth-child(2) { animation-delay:-1s; }
.cmmag__lights i:nth-child(3) { animation-delay:-2s; }
.cmmag__badge { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; border:1px solid #e1d8f1; border-radius:13px; padding:13px 15px; background:#fffffffa; box-shadow:0 12px 25px -12px #60468e30; animation:cmmag-hover 7s ease-in-out infinite; }
.cmmag__badge > svg { width:27px; stroke:#8c6cc1; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cmmag__badge > strong { font-size:11px; }
.cmmag__badge--security { top:39%; left:0; transform:rotate(-5deg); }
.cmmag__badge--backups { bottom:20%; right:0; transform:rotate(5deg); animation-delay:-3s; }
.cmmag__badge--backups > svg { stroke:#7294d1; }
.cmmag__foundation { display:flex; align-items:center; justify-content:center; gap:24px; padding:16px 20px; margin:0 10%; border:1px solid #e5ddf2; border-radius:16px; background:linear-gradient(110deg, #faf7ff, #f6f9ff); }
.cmmag__capability { display:flex; align-items:center; gap:10px; }
.cmmag__icon { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border-radius:11px; background:#eee6fa; color:#8561c2; }
.cmmag__icon svg { width:25px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cmmag__icon--blue { color:#6185c8; background:#eaf0fc; }
.cmmag__capability strong { display:block; font-size:12px; }
.cmmag__capability div > span { display:block; font-size:10px; color:var(--cmmag-muted); }
.cmmag__foundation-line { width:1px; height:28px; background:#e1d9ed; }
.cmmag__caption { margin:16px 12px 8px; color:#756b84; text-align:center; font-size:10px; }
@keyframes cmmag-flow { to { stroke-dashoffset:-300; } }
@keyframes cmmag-hover { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes cmmag-object { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes cmmag-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
/* Component width, rather than viewport width, controls hero-column layouts. */
@container (max-width:620px) {
  .cmmag__scene { padding:104px 6% 112px; }
  .cmmag__catalog { transform:none; }
  .cmmag__badge { padding:10px 12px; bottom:44px; top:auto; animation:none; transform:none; }
  .cmmag__badge--security { left:6%; }
  .cmmag__badge--backups { right:6%; }
  .cmmag__platform { bottom:51px; height:67px; }
  .cmmag__platform > div { height:28px; }
  .cmmag__network { display:none !important; }
  .cmmag__catalog-body { grid-template-columns:80px minmax(0,1fr); gap:12px; }
  .cmmag__shop { padding:17px 16px 0; }
  .cmmag__foundation { margin:0 6%; gap:15px; padding:14px; }
  .cmmag__capability { gap:8px; }
  .cmmag__capability div > span { font-size:9px; }
}
@container (max-width:420px) {
  .cmmag__toolbar { padding-inline:4px; }
  .cmmag__eyebrow { font-size:8px; letter-spacing:.08em; }
  .cmmag__motion { font-size:10px; padding:6px 8px; }
  .cmmag__scene { padding-inline:2%; }
  .cmmag__browser { padding-inline:10px; gap:7px; font-size:8px; }
  .cmmag__demo { font-size:6px; letter-spacing:0; }
  .cmmag__shop { padding-inline:13px; }
  .cmmag__headline > strong { font-size:25px; }
  .cmmag__headline p { font-size:9px; }
  .cmmag__catalog-body { grid-template-columns:minmax(0,1fr); }
  .cmmag__filters { flex-direction:row; flex-wrap:wrap; border:0; padding:0 0 10px; gap:8px; }
  .cmmag__filters > strong { width:auto; gap:7px; }
  .cmmag__filters > span:first-child, .cmmag__filters > span:nth-of-type(n+4), .cmmag__filters hr, .cmmag__swatches { display:none; }
  .cmmag__products { gap:7px; }
  .cmmag__art > span { left:6px; top:6px; font-size:5px; }
  .cmmag__product > strong { font-size:8px; }
  .cmmag__product > span { font-size:7px; }
  .cmmag__badge--security { left:2%; }
  .cmmag__badge--backups { right:2%; }
  .cmmag__badge > strong { font-size:10px; }
  .cmmag__badge > svg { width:23px; }
  .cmmag__foundation { margin:0 2%; gap:12px; padding:12px 10px; flex-wrap:wrap; }
  .cmmag__foundation-line { display:none; }
  .cmmag__capability { flex:1 1 130px; }
  .cmmag__capability strong { font-size:11px; }
  .cmmag__icon { width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce) {
  .cmmag *, .cmmag *::before, .cmmag *::after { animation:none !important; }
  .cmmag__signals, .cmmag__motion { display:none; }
}