.online-shop-page .shop-hero { background: radial-gradient(ellipse at 95% 10%, #dff4ff, transparent 55%), linear-gradient(145deg, #f7faff, #eef3fb); }
.online-shop-page .shop-split, .online-shop-page .shop-example-grid { display: grid; gap: 40px; align-items: center; }
.online-shop-page .shop-split > *, .online-shop-page .shop-example-grid > * { min-width: 0; }
.online-shop-page .shop-illustration { margin: 0; }
.online-shop-page .shop-console { overflow: hidden; padding: 20px; color: #fff; background: #0c192c; border: 1px solid #27415d; border-radius: 20px; box-shadow: 0 24px 60px #10234320; }
.online-shop-page .shop-console-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; }
.online-shop-page .shop-console-top > span:last-child { margin-left: auto; font-size: .65rem; color: #85edff; }
.online-shop-page .shop-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #0c192c; background: #85edff; font-weight: 750; }
.online-shop-page .shop-path { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 18px 0; margin: 0; color: #c9daef; font-size: .7rem; }
.online-shop-page .shop-path li:not(:last-child)::after { content: '→'; margin-left: 10px; color: #85edff; }
.online-shop-page .shop-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.online-shop-page .shop-products span { aspect-ratio: 1; border: 1px solid #437ca0; border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, #3b6c82, transparent 60%), #182b42; }
.online-shop-page .shop-selection, .online-shop-page .shop-basket, .online-shop-page .shop-order { padding: 16px; background: #182b42; border: 1px solid #36516d; border-radius: 12px; margin-top: 12px; font-size: .85rem; }
.online-shop-page .shop-label { display: block; margin-bottom: 6px; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #85edff; }
.online-shop-page .shop-console p { color: #c9daef; font-size: .75rem; margin: 6px 0 0; }
.online-shop-page .shop-basket { display: flex; align-items: center; gap: 14px; }
.online-shop-page .shop-basket svg { width: 32px; height: 32px; flex-shrink: 0; color: #85edff; }
.online-shop-page .shop-order { background: linear-gradient(110deg, #17417a, #153d51); }
.online-shop-page figcaption, .online-shop-page .shop-note { font-size: .8rem; color: #52647b; margin: 14px 0 0; }
.online-shop-page .shop-steps { display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; }
.online-shop-page .shop-step { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid #b4c9e3; border-radius: 50%; color: #1555b9; font-size: .85rem; font-weight: 750; }
.online-shop-page .shop-steps p { font-size: .93rem; margin-bottom: 0; }
.online-shop-page .shop-example { margin: 0; }
.online-shop-page .shop-example-detail { font-size: .9rem; margin: 20px 0 0; }
.online-shop-page .shop-device-example { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.online-shop-page .shop-device-example > div { display: grid; gap: 10px; padding: 16px; border: 1px solid #36516d; border-radius: 12px; background: #0c192c; color: #85edff; font-size: .75rem; }
.online-shop-page .shop-device-example i { display: block; height: 36px; border-radius: 7px; background: #182b42; border: 1px solid #437ca0; }
.online-shop-page .shop-options, .online-shop-page .shop-businesses { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.online-shop-page .shop-options li, .online-shop-page .shop-businesses li { padding: 20px 24px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; font-weight: 650; }
@media (min-width: 576px) { .online-shop-page .shop-steps, .online-shop-page .shop-options, .online-shop-page .shop-businesses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
    .online-shop-page .shop-split { grid-template-columns: 1.2fr 1fr; gap: 56px; }
    .online-shop-page .shop-example-grid { grid-template-columns: 1fr 1fr; }
    .online-shop-page .shop-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .online-shop-page .shop-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Approved project examples keep both originals at their natural aspect ratios. */
.online-shop-page .shop-browser-frame { margin: 0; background: #fff; }
.online-shop-page .shop-browser-frame img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.online-shop-page .shop-browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #0c192c; color: #c9daef; }
.online-shop-page .shop-browser-bar span { width: 6px; height: 6px; border-radius: 50%; background: #85edff; flex-shrink: 0; }
.online-shop-page .shop-browser-bar b { font-size: .65rem; font-weight: 500; margin-left: 8px; }
.online-shop-page .shop-supporting { max-width: 1000px; margin: 24px auto 0; }
.online-shop-page .shop-scope-note { padding-left: 14px; border-left: 3px solid #155cd7; }