/* Catalog, checkout, service billing and wallet finishing layer. */
:is(#order-catalog,#order-plans,#order-config,#wallet-funding,#service-console) {letter-spacing:0;min-width:0}
:is(#order-catalog,#order-plans,#order-config,#wallet-funding,#service-console) * {letter-spacing:0!important}
:is(#order-catalog,#order-plans,#order-config) {container:order-journey / inline-size}
:is(#order-plans,#order-config) .studio-heading {min-height:190px;padding:24px 26px;margin-bottom:20px;background:var(--st-paper);border-left:4px solid var(--st-blue);border-bottom:1px solid var(--st-line)}
:is(#order-plans,#order-config) .studio-heading h1 {font-size:29px;line-height:1.3}
:is(#order-plans,#order-config) .studio-heading-copy {max-width:68%}
:is(#order-plans,#order-config) .studio-art {width:29%;max-height:235px;object-fit:contain;padding:12px}
:is(#order-plans,#order-config) .studio-breadcrumb {margin-bottom:14px}
#order-catalog .oc-heading {padding:12px 0 22px;border-bottom:1px solid var(--oc-line,#dbe5eb);margin-bottom:20px}
#order-catalog .oc-heading h1 {font-size:30px;line-height:1.3;letter-spacing:0}
#order-catalog .oc-grid {gap:18px}
#order-catalog .oc-card {border-radius:8px;box-shadow:0 3px 12px #18334a07;transition:border-color .18s,box-shadow .18s;transform:none}
#order-catalog .oc-card:hover {transform:none;box-shadow:0 5px 18px #18334a12}
#order-catalog .oc-banner {height:120px;min-height:120px;max-height:120px;overflow:hidden}
#order-catalog .oc-banner img {width:100%;height:100%;object-fit:cover}
#order-catalog .oc-steps {background:transparent;border-radius:0;box-shadow:none}
#order-plans .plan-card {border-radius:8px;box-shadow:0 3px 12px #18334a07}
#order-plans .plan-card:hover {box-shadow:0 6px 18px #18334a12}
#order-plans .plan-app-filter .plan-region-options {grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}
#order-plans .plan-app-filter .plan-region-pill {min-height:58px;padding:10px 12px}
#order-plans .plan-region-pill.active {border-color:var(--st-blue);background:var(--st-soft);color:var(--st-blue)}
#order-config .config-section-nav a {border:1px solid var(--st-line);background:var(--st-paper);color:var(--st-ink);min-height:44px;gap:8px}
#order-config .config-section-nav a:hover {border-color:var(--st-blue);color:var(--st-blue)}
#order-config .config-section-nav a[aria-current=location] {border-bottom-color:var(--st-blue);background:var(--st-soft);color:var(--st-blue);font-weight:700}
#order-config #catalogOrderForm>.cp-grid {grid-template-columns:minmax(0,1fr) minmax(290px,340px)!important;gap:24px!important}
#order-config #catalogOrderForm .order-section>.cp-card-head {padding-bottom:16px}
#order-config .cp-choice-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
#order-config .cp-choice {min-height:90px;border-width:1px!important;padding:14px!important}
#order-config .btn-check:checked+.cp-choice {border-width:1px!important;padding:14px!important;background:var(--st-soft)!important;box-shadow:inset 0 0 0 1px var(--st-teal)!important}
#order-config .btn-check:checked+.cp-choice .cp-choice-title {color:var(--st-blue)!important}
#order-config .config-selection-state {font-weight:650}
#order-config .config-visual:has(img) {background:#fff!important;border-radius:6px;padding:4px}
:is(#order-config,#order-plans) :is(.cloud-order-progress,.plans-progress) strong {color:var(--st-ink)!important}
:is(#order-config,#order-plans) :is(.cloud-order-progress,.plans-progress) small {color:var(--st-muted)!important}
[data-theme=dark] #order-config .config-selection-state {color:#77d9be!important}
#order-config .order-summary-column {align-self:start}
#order-config #catalogOrderForm .order-summary-card {border-radius:8px;box-shadow:0 5px 20px #17354a09}
#order-config .order-summary-card .cp-kv-row {gap:12px;padding-block:11px}
#order-config .order-summary-card .cp-kv-value {min-width:0;overflow-wrap:anywhere}
#order-config .order-summary-card .cp-card-note {font-size:12px}
#order-config #catalogOrderForm .order-total {background:var(--st-soft)!important;border-left:3px solid var(--st-teal);border-radius:5px;padding:18px!important}
#order-config #catalogOrderForm .order-total :is(.cp-stat-label,.cp-stat-value,.cp-stat-note) {color:var(--st-ink)!important}
#order-config .config-legal-copy {font-size:12px;line-height:1.6}
#order-config .order-submit {min-height:48px}
#order-config .cloud-order-metric-icon {display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:6px;background:var(--st-soft);color:var(--st-blue)}
#order-config .cloud-order-metric:nth-child(2) .cloud-order-metric-icon {color:var(--st-rose,#b13e65)}
#order-config .cloud-order-metric:nth-child(3) .cloud-order-metric-icon {color:var(--st-teal)}
#order-config .config-section-nav a:focus-visible {outline:3px solid var(--st-blue);outline-offset:3px}
#wallet-funding {--wv-accent:#2463d4;--wv-tint:#edf3ff;--wv-tint-border:#c5d6f5;--wv-radius:8px;container:wallet-journey / inline-size;padding:0;background:transparent;border:0;box-shadow:none}
[data-theme=dark] #wallet-funding,#wallet-funding[data-wv-theme=dark] {--wv-accent:#94baff;--wv-tint:#293d56;--wv-tint-border:#52739b}
#wallet-funding h1 {font-size:30px;line-height:1.3}
#wallet-funding .wv-overview {grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:16px}
#wallet-funding .wv-balance {min-height:170px;border-radius:7px;background:#086b64;box-shadow:none;padding:22px;border-bottom:3px solid #39c6a7}
#wallet-funding .wv-orbit,#wallet-funding .wv-balance::before {display:none}
#wallet-funding .wv-balance-value strong {font-size:36px}
#wallet-funding .wv-stat {border-radius:8px;border-top:3px solid #2463d4;padding:22px}
#wallet-funding .wv-stat:last-child {border-top-color:#c43c67}
#wallet-funding .wv-stat-number {font-size:29px}
#wallet-funding .wv-panel {border-radius:0;box-shadow:none;border:0;border-top:1px solid var(--wv-border)}
#wallet-funding .wv-main {grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:24px}
#wallet-funding .wv-amount-box {border-radius:6px;min-height:78px;background:var(--wv-surface)}
#wallet-funding .wv-amount-box input {font-size:32px!important;font-weight:650;line-height:1.25;letter-spacing:0;outline:0!important;box-shadow:none!important}
#wallet-funding .wv-method-body {border-radius:7px;min-height:88px}
#wallet-funding .wv-radio:checked+.wv-method-body {border-color:var(--wv-accent);box-shadow:inset 0 0 0 1px var(--wv-accent)}
#wallet-funding .wv-btn {border-radius:6px}
#wallet-funding .wv-submit {border-radius:6px;background:#245ed1;border-color:#245ed1;color:#fff;box-shadow:none}
#wallet-funding .wv-panel-heading {border-bottom:1px solid var(--wv-border)}
#wallet-funding .wv-summary {border-top:3px solid #087e72}
#wallet-funding .wv-summary-total {border-radius:6px;border-left:3px solid var(--wv-accent)}
#service-console .service-facts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}
#service-console .service-fact {min-width:0;width:auto}
#service-console .service-fact>.cp-stat {min-height:132px;padding:18px;border:1px solid var(--vm-line);border-top:3px solid var(--vm-blue);border-radius:7px;background:var(--vm-paper);box-shadow:none}
#service-console .service-fact:nth-child(2)>.cp-stat {border-top-color:var(--vm-teal)}
#service-console .service-fact:nth-child(3)>.cp-stat {border-top-color:#b78120}
#service-console .service-fact:nth-child(4)>.cp-stat {border-top-color:var(--vm-rose)}
#service-console .cp-stat-value {color:var(--vm-ink);overflow-wrap:anywhere}
#service-console :is(.cp-stat-label,.cp-stat-note) {color:var(--vm-muted)}
@container order-journey (max-width:900px) {
    #order-config #catalogOrderForm>.cp-grid {grid-template-columns:minmax(0,1fr)!important}
    #order-config .order-summary-column {position:static!important}
    #order-plans .plan-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container order-journey (max-width:550px) {
    :is(#order-plans,#order-config) .studio-heading {padding:20px 16px;min-height:0}
    :is(#order-plans,#order-config) .studio-heading-copy {max-width:100%}
    :is(#order-plans,#order-config) .studio-art {display:none}
    :is(#order-plans,#order-config) .studio-heading h1,#order-catalog .oc-heading h1 {font-size:24px}
    #order-plans .plan-grid {grid-template-columns:minmax(0,1fr)}
    #order-config .cloud-order-strip {grid-template-columns:repeat(2,minmax(0,1fr))}
    #order-config .config-section-nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Keep checkout usable when a theme replaces the named sizing container. */
@media(max-width:900px) {
    #order-config #catalogOrderForm>.cp-grid {grid-template-columns:minmax(0,1fr)!important}
    #order-config #catalogOrderForm>.cp-grid>:is(.order-config-column,.order-summary-column) {grid-column:1 / -1!important;min-width:0;width:100%;max-width:100%}
    #order-config .order-summary-column {position:static!important}
}
@container wallet-journey (max-width:850px) {
    #wallet-funding .wv-main {grid-template-columns:minmax(0,1fr)}
    #wallet-funding .wv-overview {grid-template-columns:repeat(2,minmax(0,1fr))}
    #wallet-funding .wv-balance {grid-column:1/-1;min-height:190px}
    #wallet-funding .wv-sidebar {display:grid;grid-template-columns:minmax(0,1fr)}
}
@container wallet-journey (max-width:480px) {
    #wallet-funding .wv-heading {align-items:flex-start;gap:16px;flex-direction:column}
    #wallet-funding h1 {font-size:25px}
    #wallet-funding .wv-stat {padding:16px}
    #wallet-funding .wv-methods {grid-template-columns:minmax(0,1fr)}
    #wallet-funding .wv-stat-number {font-size:25px}
}
@container vm-console (max-width:850px) {#service-console .service-facts {grid-template-columns:repeat(2,minmax(0,1fr))}}
@container vm-console (max-width:400px) {#service-console .service-facts {grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce) {#order-catalog .oc-card {transition:none}}
body[data-motion=off] #order-catalog .oc-card {transition:none}

/* Clear hierarchy across selection, configuration, funding and service billing. */
:is(#order-plans,#order-config) .studio-heading {background:transparent;border-left:0;border-bottom:1px solid var(--st-line);min-height:160px;padding:20px 0}
:is(#order-plans,#order-config) .studio-heading-copy {max-width:70%}
:is(#order-plans,#order-config) .studio-art {width:25%;height:150px;max-height:150px;object-fit:contain;mix-blend-mode:multiply}
#order-catalog .oc-heading {background:transparent;padding:20px 0;border-left:0;border-bottom:1px solid var(--oc-line,#dbe5eb)}
#order-catalog .oc-card {border-top:3px solid #2464d6}
#order-catalog .oc-application {border-top-color:#0a917d}
#order-catalog .oc-dedicated {border-top-color:#c34571}
#order-catalog .oc-hosting {border-top-color:#c08929}
#order-catalog .oc-card :is(h3,p) {overflow-wrap:anywhere}
#order-catalog .oc-kind {font-size:11px;background:var(--oc-soft,#f1f6fa);padding:5px 8px;border-radius:4px}
#order-plans .plan-card {border-top:3px solid #2464d6;transition:border-color .18s,box-shadow .18s}
#order-plans .plan-card:nth-child(3n+2) {border-top-color:#0a917d}
#order-plans .plan-card:nth-child(3n) {border-top-color:#c34571}
#order-config .config-section-nav {gap:6px;border-bottom:1px solid var(--st-line);padding:0 0 12px}
#order-config .config-section-nav a {border:0;border-bottom:2px solid transparent;border-radius:0;font-size:13px;transition:background .18s,border-color .18s}
#order-config .config-section-nav a i {color:var(--st-blue)}
#order-config .config-section-nav a:nth-child(3n) i {color:var(--st-teal)}
#order-config .order-section {border:0!important;border-top:2px solid var(--st-line)!important;border-radius:0!important;box-shadow:none!important}
#order-config .order-section>.cp-card-head {border-bottom:1px solid var(--st-line);padding:18px 0}
#order-config .order-section>.cp-card-pad {padding:20px 0}
#order-config .cp-choice {transition:border-color .18s,background .18s,box-shadow .18s;min-width:0;overflow-wrap:anywhere}
#order-config .cp-choice:hover {border-color:var(--st-blue)!important;background:var(--st-soft)!important}
#order-config .cp-choice-title {font-size:14px!important;line-height:1.45}
#order-config .order-summary-card {border-top:3px solid #0a917d}
#order-config .order-summary-card .cp-card-head {padding:18px 20px}
#order-config .config-section-number {border-radius:6px;box-shadow:none}
#order-config .order-total .cp-stat-value {font-size:30px;line-height:1.3}
#order-config .order-submit {background:#2464d6!important;color:#fff!important}
#wallet-funding .wv-heading {padding:20px 0;border-bottom:1px solid var(--wv-border);border-top:0;margin-bottom:20px}
#wallet-funding .wv-heading-art {width:126px;height:78px;object-fit:contain;margin-right:10px;mix-blend-mode:multiply}
#wallet-funding .wv-heading-actions {padding:0;gap:10px}
#wallet-funding .wv-stat:first-of-type {background:var(--wv-tint)}
#wallet-funding .wv-stat-icon {border-radius:6px;color:#2464d6;background:#edf3ff}
#wallet-funding .wv-stat:last-child .wv-stat-icon {color:#c34571;background:#fceef3}
#wallet-funding .wv-panel-heading :is(h2,h3) {font-size:18px}
#wallet-funding .wv-method-body {transition:border-color .18s,background .18s,box-shadow .18s}
#wallet-funding .wv-method:hover .wv-method-body {border-color:var(--wv-accent)}
#wallet-funding .wv-radio:checked+.wv-method-body {background:var(--wv-tint);color:var(--wv-text)}
#wallet-funding .wv-submit:hover:not(:disabled) {background:#194eb6;border-color:#194eb6}
#service-console .service-fact>.cp-stat {background:color-mix(in srgb,var(--vm-tint) 35%,var(--vm-paper))}
#service-console .service-fact:nth-child(2)>.cp-stat {background:color-mix(in srgb,var(--vm-teal) 5%,var(--vm-paper))}
#service-console .service-fact:nth-child(3)>.cp-stat {background:color-mix(in srgb,#b78120 5%,var(--vm-paper))}
#service-console .service-fact:nth-child(4)>.cp-stat {background:color-mix(in srgb,var(--vm-rose) 5%,var(--vm-paper))}
[data-theme=dark] :is(#order-plans,#order-config) .studio-heading,[data-theme=dark] #order-catalog .oc-heading {background:transparent}
[data-theme=dark] #wallet-funding .wv-heading-art {mix-blend-mode:normal;border-radius:5px}
@container wallet-journey (max-width:1050px) {#wallet-funding .wv-heading-art {display:none}}
@container order-journey (max-width:550px) {
    #order-catalog .oc-heading {padding:20px 0}
    :is(#order-plans,#order-config) .studio-heading-copy {max-width:100%}
}
@media(prefers-reduced-motion:no-preference) {
    body[data-motion=on] :is(#order-catalog .oc-heading,#order-config .studio-heading,#order-plans .studio-heading,#wallet-funding .wv-heading) {animation:journey-enter .35s ease-out both}
}
@keyframes journey-enter {from {opacity:.8;transform:translateY(5px)} to {opacity:1;transform:translateY(0)}}