body.commercial-plans #subView {
    width: 100%;
    padding: 1rem 0 4rem;
    align-items: stretch;
}

.opl-shell { width: min(1240px, 100%); margin: 0 auto; color: var(--text); }
.opl-hero {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2rem;
    border: 1px solid var(--border);
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 25rem),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
    box-shadow: 0 26px 70px rgba(16, 18, 24, .09);
}
.opl-hero::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 160px;
    right: -100px;
    bottom: -95px;
    border: 2px dashed color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 50%;
    transform: rotate(-7deg);
}
.opl-hero-copy, .opl-hero-side, .opl-preview-note, .opl-route { position: relative; z-index: 1; }
.opl-kicker { display: flex; align-items: center; gap: .48rem; color: var(--accent-hover); font-size: .68rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.opl-kicker svg { width: 16px; height: 16px; }
.opl-kicker span { padding: .35rem .55rem; border-radius: 999px; color: #17120e; background: var(--accent); font-size: .54rem; letter-spacing: .08em; }
.opl-hero h2 { margin: 1.25rem 0 .8rem; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .9; letter-spacing: -.072em; }
.opl-hero p { max-width: 640px; margin: 0; color: var(--text-3); font-size: 1rem; line-height: 1.65; }
.opl-preview-note { padding: 1rem 1.1rem; display: flex; align-items: center; gap: .75rem; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(16px); }
.opl-preview-note > svg { width: 20px; height: 20px; color: var(--accent-hover); }
.opl-preview-note strong, .opl-preview-note small { display: block; white-space: nowrap; }
.opl-preview-note strong { font-size: .74rem; }
.opl-preview-note small { margin-top: .22rem; color: var(--text-3); font-size: .61rem; }
.opl-hero-side { display:grid; gap:.55rem; }
.opl-cart-launch { min-height:48px; padding:0 1rem; display:flex; align-items:center; justify-content:center; gap:.55rem; border:1px solid var(--border); border-radius:15px; color:var(--text); background:var(--surface); font:inherit; font-size:.7rem; font-weight:850; cursor:pointer; }
.opl-cart-launch svg { width:17px; height:17px; }
.opl-cart-launch b { min-width:21px; height:21px; display:grid; place-items:center; border-radius:99px; color:var(--text-3); background:var(--surface-2); font-size:.58rem; }
.opl-cart-launch.has-item { border-color:var(--accent); }
.opl-cart-launch.has-item b { color:#17120e; background:var(--accent); }
.opl-route {
    grid-column: 1 / -1;
    align-self: end;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.opl-route::before { content: ''; position: absolute; top: 50%; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, var(--border))); transform: translateY(-50%); }
.opl-route span { position: relative; z-index: 1; width: 44px; height: 44px; justify-self: center; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 15px; color: var(--text-3); background: var(--surface); box-shadow: 0 8px 22px rgba(16,18,24,.09); }
.opl-route span.active { color: #17120e; border-color: var(--accent); background: var(--accent); }
.opl-route svg { width: 18px; height: 18px; }

.opl-storage-legend { margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.opl-storage-legend span { padding: .85rem 1rem; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: 16px; color: var(--text-3); background: var(--surface); font-size: .7rem; }
.opl-storage-legend svg { width: 16px; height: 16px; color: var(--accent-hover); }
.opl-storage-legend strong { color: var(--text); }

.opl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.opl-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 1.65rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: var(--surface);
    box-shadow: 0 16px 42px rgba(16,18,24,.06);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.opl-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); box-shadow: 0 24px 56px rgba(16,18,24,.1); }
.opl-card.bigger { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 88%, var(--accent) 12%), var(--surface) 48%); }
.opl-card.enterprise { color: #f6f7f9; border-color: #2d3037; background: linear-gradient(155deg, #22252b, #111318 62%); }
.opl-card.active-tier { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 22px 54px rgba(16,18,24,.11); }
.opl-card.active-tier::after { content: 'CURRENT PLAN'; position: absolute; right: 1rem; bottom: .55rem; color: var(--accent-hover); font-size: .5rem; font-weight: 900; letter-spacing: .1em; }
.opl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.opl-number { color: var(--text-3); font-size: .62rem; font-weight: 850; letter-spacing: .12em; }
.enterprise .opl-number { color: #858b97; }
.opl-drive { padding: .4rem .58rem; display: inline-flex; align-items: center; gap: .32rem; border-radius: 999px; font-size: .57rem; font-weight: 850; letter-spacing: .07em; }
.opl-drive svg { width: 13px; height: 13px; }
.opl-drive.hdd { color: #656a73; background: var(--surface-2); }
.opl-drive.ssd { color: #a95717; background: #fff0df; }
.enterprise .opl-drive.ssd { color: #ffc489; background: rgba(255,166,82,.14); }
.opl-plan-icon { width: 54px; height: 54px; margin: 1.5rem 0 1rem; display: grid; place-items: center; border-radius: 17px; color: var(--accent-hover); background: var(--accent-subtle); }
.opl-plan-icon svg { width: 24px; height: 24px; }
.enterprise .opl-plan-icon { color: #ffb26a; background: rgba(255,165,80,.12); }
.opl-alias { color: var(--accent-hover); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.opl-card h3 { margin: .42rem 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1; letter-spacing: -.055em; }
.opl-tagline { min-height: 2.8em; margin: 0; color: var(--text-3); font-size: .79rem; line-height: 1.5; }
.enterprise .opl-tagline { color: #969ba6; }
.opl-price { margin: 1.25rem 0; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.enterprise .opl-price { border-color: #2b2e35; }
.opl-price strong, .opl-price span { display: block; }
.opl-price strong { font-size: 1.3rem; letter-spacing: -.035em; }
.opl-price span { margin-top: .3rem; color: var(--text-3); font-size: .63rem; }
.enterprise .opl-price span { color: #858b96; }
.opl-benefits { margin: 0 0 1.3rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .62rem; list-style: none; }
.opl-benefit { min-width: 0; padding: .75rem; display: flex; align-items: flex-start; gap: .62rem; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.enterprise .opl-benefit { border-color: #2b2e35; background: rgba(255,255,255,.035); }
.opl-benefit.muted { opacity: .58; }
.opl-benefit-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; color: var(--accent-hover); background: var(--accent-subtle); }
.opl-benefit-icon svg { width: 14px; height: 14px; }
.enterprise .opl-benefit-icon { color: #ffb26a; background: rgba(255,165,80,.11); }
.opl-benefit strong, .opl-benefit small { display: block; }
.opl-benefit strong { font-size: .68rem; line-height: 1.25; }
.opl-benefit small { margin-top: .24rem; color: var(--text-3); font-size: .56rem; line-height: 1.35; }
.enterprise .opl-benefit small { color: #858b96; }
.opl-action { width: 100%; min-height: 50px; margin-top: auto; border: 1px solid var(--border); border-radius: 15px; color: var(--text-2); background: var(--surface-2); font: inherit; font-size: .72rem; font-weight: 850; cursor:pointer; }
.opl-action:disabled { opacity:.55; cursor:default; }
.opl-action.primary { color: #17120e; border-color: var(--accent); background: var(--accent); }
.opl-action.enterprise-talk { color: #15120f; border: 0; background: #ffad5d; cursor: pointer; }
.opl-action.enterprise-talk:hover { background: #ff9d41; }
.opl-popular { position: absolute; top: 0; left: 50%; padding: .43rem .85rem; border-radius: 0 0 11px 11px; color: #17120e; background: var(--accent); font-size: .5rem; font-weight: 900; letter-spacing: .1em; transform: translateX(-50%); }
.opl-promo { margin-top: 1rem; padding: 1rem 1.15rem; display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: .75rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.opl-promo > div { display: flex; align-items: center; gap: .7rem; }
.opl-promo > div > svg { width: 20px; color: var(--accent-hover); }
.opl-promo strong, .opl-promo small { display: block; }
.opl-promo strong { font-size: .74rem; }
.opl-promo small { margin-top: .18rem; color: var(--text-3); font-size: .62rem; }
.opl-promo input, .opl-promo button { min-height: 44px; border: 1px solid var(--border); border-radius: 13px; font: inherit; }
.opl-promo input { min-width: 0; padding: 0 .85rem; color: var(--text); background: var(--surface-2); font-size: .7rem; }
.opl-promo button { padding: 0 1.15rem; color: #17120e; background: var(--accent); font-size: .7rem; font-weight: 850; cursor: pointer; }
.opl-promo button svg { width:15px; height:15px; vertical-align:middle; }
.opl-credits { margin-top:1rem; padding:1.3rem; border:1px solid var(--border); border-radius:24px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,var(--accent) 8%),var(--surface)); box-shadow:0 16px 42px rgba(16,18,24,.055); }
.opl-credits-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.opl-credits-head > div:first-child > span { display:flex; align-items:center; gap:.4rem; color:var(--accent-hover); font-size:.59rem; font-weight:900; letter-spacing:.1em; }
.opl-credits-head > div:first-child > span svg { width:15px; height:15px; }
.opl-credits-head h3 { margin:.5rem 0 .3rem; font-size:1.35rem; letter-spacing:-.04em; }
.opl-credits-head p { max-width:620px; margin:0; color:var(--text-3); font-size:.66rem; line-height:1.5; }
.opl-credit-balance { min-width:105px; padding:.75rem .9rem; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); border-radius:16px; background:var(--surface); text-align:right; }
.opl-credit-balance strong,.opl-credit-balance span { display:block; }
.opl-credit-balance strong { font-size:1.35rem; letter-spacing:-.045em; }
.opl-credit-balance span { margin-top:.12rem; color:var(--text-3); font-size:.55rem; font-weight:800; }
.opl-credit-products { margin-top:1rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.opl-credit-products article { min-width:0; padding:.8rem; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.opl-credit-products article > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--accent-hover); background:var(--accent-subtle); }
.opl-credit-products article > span svg { width:16px; height:16px; }
.opl-credit-products strong,.opl-credit-products small { display:block; }
.opl-credit-products strong { font-size:.66rem; line-height:1.25; }
.opl-credit-products small { margin-top:.2rem; color:var(--text-3); font-size:.54rem; line-height:1.35; }
.opl-credit-products button { grid-column:1/-1; min-height:38px; border:0; border-radius:11px; color:#17120e; background:var(--accent); font:inherit; font-size:.62rem; font-weight:900; cursor:pointer; }
.opl-credit-products button:disabled { color:var(--text-3); background:var(--surface-2); cursor:not-allowed; }
.opl-credit-products article.unavailable { opacity:.66; }
.opl-credit-meta { margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.opl-credit-meta span { padding:.42rem .58rem; border:1px solid var(--border); border-radius:999px; color:var(--text-3); background:var(--surface); font-size:.54rem; font-weight:750; }
.opl-credit-code { margin-top:.7rem; padding:.7rem; display:flex; align-items:center; gap:.65rem; border:1px solid color-mix(in srgb,#42af82 45%,var(--border)); border-radius:14px; background:color-mix(in srgb,#42af82 8%,var(--surface)); }
.opl-credit-code[hidden] { display:none !important; }
.opl-credit-code span { color:var(--text-3); font-size:.57rem; }
.opl-credit-code code { flex:1; overflow:hidden; color:var(--text); font:850 .68rem/1 monospace; text-overflow:ellipsis; }
.opl-credit-code button { min-height:34px; padding:0 .7rem; display:flex; align-items:center; gap:.3rem; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface); font:inherit; font-size:.57rem; font-weight:850; cursor:pointer; }
.opl-credit-code button svg { width:13px; height:13px; }
.opl-credit-message { min-height:.8rem; margin:.55rem 0 0; color:var(--accent-hover); font-size:.58rem; }
.opl-footer-note { margin-top: 1rem; padding: 1rem 1.15rem; display: flex; align-items: center; gap: .8rem; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--text-3); }
.opl-footer-note > svg { width: 20px; height: 20px; color: var(--accent-hover); }
.opl-footer-note strong, .opl-footer-note span { display: block; }
.opl-footer-note strong { color: var(--text); font-size: .74rem; }
.opl-footer-note span { margin-top: .2rem; font-size: .65rem; }

body.opl-cart-open { overflow:hidden; }
.opl-cart-backdrop { position:fixed; z-index:42000; inset:0; padding:1rem; display:grid; place-items:center; overflow-y:auto; background:rgba(7,8,11,.68); backdrop-filter:blur(15px); animation:oplFade .22s ease both; }
.opl-cart { width:min(540px,100%); overflow:hidden; border:1px solid var(--border); border-radius:28px; color:var(--text); background:var(--surface); box-shadow:0 34px 100px rgba(0,0,0,.42); animation:oplCartIn .38s cubic-bezier(.2,1,.3,1) both; }
@keyframes oplFade { from{opacity:0} to{opacity:1} }
@keyframes oplCartIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
.opl-cart-head { padding:1.25rem 1.3rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border); }
.opl-cart-head span { color:var(--accent-hover); font-size:.58rem; font-weight:900; letter-spacing:.12em; }
.opl-cart-head h3 { margin:.38rem 0 0; font-size:1.55rem; letter-spacing:-.045em; }
.opl-cart-head button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; color:var(--text-2); background:var(--surface-2); font-size:1.4rem; cursor:pointer; }
.opl-cart-body { padding:1.15rem 1.3rem; display:grid; gap:.85rem; }
.opl-cart-item { padding:.85rem; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:.7rem; border:1px solid var(--border); border-radius:17px; background:var(--surface-2); }
.opl-cart-item-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#17120e; background:var(--accent); }
.opl-cart-item-icon svg { width:19px; height:19px; }
.opl-cart-item strong,.opl-cart-item small { display:block; }
.opl-cart-item strong { font-size:.78rem; }
.opl-cart-item small { margin-top:.24rem; color:var(--text-3); font-size:.59rem; }
.opl-cart-item > b { font-size:.76rem; white-space:nowrap; }
.opl-cart-item > button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:10px; color:var(--text-3); background:var(--surface); cursor:pointer; }
.opl-cart-item > button svg { width:15px; height:15px; }
.opl-cart-code { padding:.9rem; border:1px solid var(--border); border-radius:17px; }
.opl-cart-code label { display:block; margin-bottom:.5rem; color:var(--text-3); font-size:.61rem; font-weight:800; }
.opl-cart-code > div { display:flex; gap:.5rem; }
.opl-cart-code input { min-width:0; height:46px; flex:1; padding:0 .8rem; border:1px solid var(--border); outline:0; border-radius:12px; color:var(--text); background:var(--surface-2); font:800 .72rem/1 monospace; letter-spacing:.04em; }
.opl-cart-code input:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent); }
.opl-cart-code button { min-width:88px; border:0; border-radius:12px; color:#17120e; background:var(--accent); font-family:inherit; font-size:.68rem; font-weight:850; cursor:pointer; }
.opl-cart-code button:disabled { opacity:.6; cursor:wait; }
.opl-cart-code p { min-height:.9rem; margin:.45rem 0 0; color:var(--text-3); font-size:.59rem; }
.opl-cart-code p.success { color:#23865e; }
.opl-cart-code p.error { color:#d24c58; }
.opl-cart-summary { padding:.9rem; display:grid; gap:.65rem; border-radius:17px; background:var(--surface-2); }
.opl-cart-summary > div { display:flex; align-items:center; justify-content:space-between; color:var(--text-3); font-size:.68rem; }
.opl-cart-summary > div b { color:var(--text-2); }
.opl-cart-summary .discount b { color:#23865e; }
.opl-cart-summary .total { padding-top:.7rem; border-top:1px solid var(--border); color:var(--text); font-weight:850; }
.opl-cart-summary .total b { color:var(--text); font-size:1.25rem; }
.opl-payment-row,.opl-free-checkout { padding:.85rem; display:flex; align-items:center; gap:.7rem; border:1px solid var(--border); border-radius:16px; }
.opl-payment-row[hidden],.opl-free-checkout[hidden],.opl-checkout-error[hidden],.opl-cart-summary [hidden] { display:none !important; }
.opl-payment-row > svg,.opl-free-checkout > svg { width:19px; height:19px; color:var(--accent-hover); }
.opl-payment-row div,.opl-free-checkout div { min-width:0; flex:1; }
.opl-payment-row strong,.opl-payment-row small,.opl-free-checkout strong,.opl-free-checkout small { display:block; }
.opl-payment-row strong,.opl-free-checkout strong { font-size:.7rem; }
.opl-payment-row small,.opl-free-checkout small { margin-top:.2rem; color:var(--text-3); font-size:.58rem; line-height:1.35; }
.opl-payment-row > span svg { width:16px; height:16px; color:var(--text-3); }
.opl-free-checkout { border-color:color-mix(in srgb,#42af82 45%,var(--border)); background:color-mix(in srgb,#42af82 8%,var(--surface)); }
.opl-free-checkout > svg { color:#23865e; }
.opl-checkout-error { padding:.95rem; border:1px solid rgba(219,70,83,.28); border-radius:16px; background:rgba(219,70,83,.075); }
.opl-checkout-error strong,.opl-checkout-error span { display:block; }
.opl-checkout-error strong { color:#d44753; font-size:.77rem; }
.opl-checkout-error span { margin-top:.3rem; color:var(--text-3); font-size:.6rem; line-height:1.45; }
.opl-cart-footer { padding:1rem 1.3rem 1.3rem; border-top:1px solid var(--border); }
.opl-cart-footer p { margin:0 0 .75rem; display:flex; align-items:center; gap:.4rem; color:var(--text-3); font-size:.57rem; }
.opl-cart-footer p svg { width:14px; height:14px; color:#23865e; }
.opl-cart-footer > button { width:100%; min-height:54px; padding:0 1rem; display:flex; align-items:center; justify-content:center; gap:.55rem; border:0; border-radius:15px; color:#17120e; background:var(--accent); font:inherit; font-size:.76rem; font-weight:900; cursor:pointer; }
.opl-cart-footer > button:hover { background:var(--accent-hover); }
.opl-cart-footer > button:disabled { opacity:.6; cursor:wait; }
.opl-cart-footer > button svg { width:17px; height:17px; }
.opl-cart-empty { padding:2.2rem 1.3rem; display:grid; justify-items:center; text-align:center; }
.opl-cart-empty > svg { width:34px; height:34px; color:var(--accent-hover); }
.opl-cart-empty strong { margin-top:.9rem; font-size:1rem; }
.opl-cart-empty span { margin-top:.35rem; color:var(--text-3); font-size:.7rem; }
.opl-cart-empty button { min-height:46px; margin-top:1.1rem; padding:0 1rem; border:0; border-radius:13px; color:#17120e; background:var(--accent); font:inherit; font-size:.68rem; font-weight:850; cursor:pointer; }

body.dark-mode .opl-card.bigger { background: linear-gradient(150deg, rgba(54,38,26,.92), var(--surface) 52%); }
body.dark-mode .opl-drive.ssd { color: #ffc489; background: rgba(255,166,82,.14); }

@media (min-width: 1150px) {
    .opl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .opl-benefits { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    body.commercial-plans #subView { padding: .35rem 0 calc(6rem + env(safe-area-inset-bottom)); }
    .opl-hero { min-height: 0; padding: 1.35rem; grid-template-columns: 1fr; gap: 1rem; border-radius: 24px; }
    .opl-hero h2 { margin-top: 1rem; font-size: 3.25rem; }
    .opl-hero p { font-size: .78rem; }
    .opl-preview-note { width: 100%; }
    .opl-hero-side { width:100%; grid-template-columns:1fr auto; }
    .opl-cart-launch span { display:none; }
    .opl-route { margin-top: 1rem; }
    .opl-route span { width: 38px; height: 38px; border-radius: 13px; }
    .opl-storage-legend { grid-template-columns: 1fr; gap: .5rem; }
    .opl-grid { grid-template-columns: 1fr; gap: .75rem; }
    .opl-card { padding: 1.25rem; border-radius: 22px; }
    .opl-card h3 { font-size: 2.25rem; }
    .opl-benefits { grid-template-columns: 1fr; }
    .opl-tagline { min-height: 0; }
    .opl-footer-note { align-items: flex-start; }
    .opl-promo { grid-template-columns: 1fr; }
    .opl-promo button { width: 100%; }
    .opl-credits { padding:1rem; border-radius:21px; }
    .opl-credits-head { align-items:stretch; flex-direction:column; }
    .opl-credit-balance { min-width:0; display:flex; align-items:baseline; justify-content:space-between; text-align:left; }
    .opl-credit-products { grid-template-columns:1fr; }
    .opl-credit-code { align-items:stretch; flex-wrap:wrap; }
    .opl-credit-code code { flex-basis:100%; order:3; }
    .opl-cart-backdrop { padding:0; place-items:end center; }
    .opl-cart { width:100%; max-height:calc(100dvh - env(safe-area-inset-top)); overflow-y:auto; border-radius:25px 25px 0 0; padding-bottom:env(safe-area-inset-bottom); }
    .opl-cart-head { position:sticky; z-index:2; top:0; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(16px); }
    .opl-cart-item { grid-template-columns:auto minmax(0,1fr) auto; }
    .opl-cart-item > button { grid-column:3; grid-row:2; justify-self:end; }
}

@media (prefers-reduced-motion: reduce) {
    .opl-card { transition: none; }
}