/* 2.50.0 — WP3 upgrades: group tiles → per-group option panel (inline ≥1024px, bottom sheet below) + live total. */
.system-upgrades{display:flex;flex-direction:column;gap:14px;inline-size:100%;margin:6px 0 20px;flex-basis:100%;min-width:0}
.upg-required{color:var(--c-danger,#dc2626)}
.upg-help{margin:0 0 12px;font-size:12.5px;line-height:1.8;color:var(--c-text-soft,#6b7280)}

/* Level 1 — group tiles (same family as the home category cards). */
.upg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.upg-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;min-block-size:96px;margin:0;padding:12px 6px 10px;border:1.5px solid var(--c-border,#ebe7f5);border-radius:var(--radius,14px);background:#fff;color:var(--c-text,#211c38);font:inherit;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.upg-tile:hover{transform:translateY(-4px);border-color:var(--c-accent,#a78bfa);box-shadow:var(--shadow,0 10px 26px rgba(76,29,149,.12))}
.upg-tile:focus-visible{outline:2px solid var(--c-primary,#7c3aed);outline-offset:2px}
.upg-tile.is-active{border-color:var(--c-primary,#7c3aed);background:var(--c-primary-soft,#ede9fe);box-shadow:0 0 0 3px rgba(124,58,237,.14);transform:none}
.upg-tile-icon{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;background:var(--c-primary-soft,#ede9fe);color:var(--c-primary,#7c3aed);overflow:hidden;flex:none}
.upg-tile.is-active .upg-tile-icon{background:#fff}
.upg-tile-icon .upg-ico{inline-size:26px;block-size:26px}
.upg-tile-icon .upg-ico-img{inline-size:100%;block-size:100%;object-fit:contain}
.upg-tile-title{font-size:13px;font-weight:800;line-height:1.5}
.upg-tile-sel{max-inline-size:100%;padding:1px 8px;border-radius:999px;background:var(--c-bg-soft,#f7f6fb);color:var(--c-text-soft,#6b7280);font-size:11px;font-weight:600;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upg-tile.is-changed .upg-tile-sel{background:var(--c-primary-soft,#ede9fe);color:var(--c-primary-dark,#4c1d95)}
.upg-tile.is-active .upg-tile-sel{background:#fff}
.upg-tile-chip{padding:0 7px;border-radius:999px;background:var(--c-primary,#7c3aed);color:#fff;font-size:10.5px;font-weight:700;line-height:1.8;white-space:nowrap;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}

/* Level 2 — option panel. Desktop: inline under the tiles with a height transition. */
.upg-sheet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.upg-sheet.is-open{grid-template-rows:1fr}
.upg-sheet-inner{min-height:0;overflow:hidden}
.upg-sheet-backdrop,.upg-sheet-grip{display:none}
.upg-panel{padding:14px;border:1.5px solid var(--c-primary,#7c3aed);border-radius:var(--radius,14px);background:#fff}
.upg-panel:focus{outline:none}
.upg-panel:focus-visible{outline:2px solid var(--c-primary,#7c3aed);outline-offset:2px}
.upg-panel-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.upg-panel-title{margin:0;font-size:15px;font-weight:900;color:var(--c-text,#211c38)}
.upg-panel-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:var(--c-bg-soft,#f7f6fb);color:var(--c-primary-dark,#4c1d95);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.upg-panel-back:hover{background:var(--c-primary-soft,#ede9fe)}
.upg-panel-back:focus-visible,.upg-panel-done:focus-visible{outline:2px solid var(--c-primary,#7c3aed);outline-offset:2px}
.upg-panel-err{margin:10px 0 0;font-size:12.5px;font-weight:700;color:var(--c-danger,#dc2626)}
.upg-panel-done{display:flex;align-items:center;justify-content:center;inline-size:100%;min-height:46px;margin-top:12px;font-weight:800}
.upg-group{min-width:0;margin:0;padding:0;border:0}

/* Option cards: image on top (fixed ratio), name, note, price, link. */
.upg-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.upg-choice{position:relative;display:flex;min-width:0;cursor:pointer}
.upg-radio{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}
.upg-card{position:relative;display:flex;flex-direction:column;gap:4px;inline-size:100%;padding:10px;border:1.5px solid var(--c-border,#ebe7f5);border-radius:var(--radius,14px);background:#fff;transition:border-color .18s,box-shadow .18s,background-color .18s}
.upg-media{display:grid;place-items:center;aspect-ratio:4/3;inline-size:100%;margin-bottom:4px;border-radius:10px;background:var(--c-bg-soft,#f7f6fb);overflow:hidden}
.upg-media .upg-img{inline-size:100%;block-size:100%;object-fit:contain}
.upg-media-icon{color:var(--c-primary,#7c3aed);opacity:.75}.upg-media-icon .upg-ico{inline-size:34px;block-size:34px}
.upg-name{font-size:13px;font-weight:800;line-height:1.6;color:var(--c-text,#211c38);overflow-wrap:anywhere}
.upg-note{font-size:11.5px;line-height:1.6;color:var(--c-text-soft,#6b7280);overflow-wrap:anywhere}
.upg-delta{margin-top:auto;font-size:12px;font-weight:700;color:var(--c-primary,#7c3aed)}
.upg-link{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-block:-8px -10px;font-size:12px;font-weight:700;color:var(--c-primary,#7c3aed);text-decoration:none}
.upg-link:hover{text-decoration:underline;text-underline-offset:3px}
.upg-link:focus-visible{outline:2px solid var(--c-primary,#7c3aed);outline-offset:2px;border-radius:4px}
.upg-check{position:absolute;z-index:1;inset-block-start:8px;inset-inline-end:8px;display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;background:var(--c-primary,#7c3aed);color:#fff;font-size:12px;line-height:1;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s;box-shadow:0 0 0 3px #fff}
.upg-choice:hover .upg-card{border-color:var(--c-accent,#a78bfa)}
.upg-radio:checked+.upg-card{border-color:var(--c-primary,#7c3aed);background:var(--c-primary-soft,#ede9fe);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.upg-radio:checked+.upg-card .upg-media{background:#fff}
.upg-radio:checked+.upg-card .upg-check{opacity:1;transform:none}
.upg-radio:focus-visible+.upg-card{outline:2px solid var(--c-primary-dark,#4c1d95);outline-offset:2px}
.upg-choice.is-disabled{cursor:not-allowed}.upg-choice.is-disabled .upg-card{opacity:.5;background:var(--c-bg-soft,#f7f6fb)}.upg-choice.is-disabled .upg-delta{color:var(--c-danger,#dc2626)}

/* Summary */
.upg-summary{padding:14px 16px;border-radius:var(--radius,14px);background:var(--c-bg-soft,#f7f6fb);border:1px solid var(--c-border,#ebe7f5)}
.upg-summary-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;color:var(--c-text-soft,#6b7280)}
.upg-summary-line{font-size:12.5px}.upg-summary-line span:first-child{min-width:0;overflow-wrap:anywhere}.upg-summary-line span:last-child{white-space:nowrap;color:var(--c-primary-dark,#4c1d95);font-weight:700}
.upg-summary-total{margin-top:6px;padding-top:10px;border-top:1px dashed var(--c-border,#ebe7f5);font-size:15px;font-weight:800;color:var(--c-text,#211c38)}
.upg-summary-total output{color:var(--c-primary-dark,#4c1d95);text-align:end}
form.cart:has(.system-upgrades){flex-wrap:wrap}

/* Box + description layout (2.49.0). */
.has-system-upgrades.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;min-width:0}
.sys-desc-layout{min-width:0}
.sys-desc-layout>*{min-width:0}
.sys-upgrade-box{margin:0 0 28px;padding:22px 20px;border:1px solid var(--c-border,#ebe7f5);border-radius:var(--radius-lg,22px);background:#fff;box-shadow:0 14px 36px rgba(76,29,149,.10),0 2px 8px rgba(33,28,56,.05);line-height:1.8}
.sys-upg-heading{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--c-border,#ebe7f5);font-size:18px;font-weight:900;color:var(--c-text,#211c38)}
.sys-upg-heading::before{content:"";inline-size:6px;block-size:22px;border-radius:3px;background:var(--grad,linear-gradient(135deg,#7c3aed,#4c1d95))}
.sys-upgrade-box .system-upgrades{margin:0 0 14px}
.sys-upg-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.sys-upg-actions .quantity{flex:0 0 auto}.sys-upg-actions .quantity input{min-height:44px}
.sys-upgrade-box .sys-upg-submit{flex:1 1 180px;min-height:48px;justify-content:center;font-weight:800}
.sys-upgrade-box .guest-purchase{margin-top:12px}
.sys-upg-jump-wrap{margin:14px 0}.sys-upg-jump{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding-inline:22px}
@media(min-width:1024px){
	.sys-desc-layout.has-upgrades{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-template-areas:"spec box" "old box";grid-template-rows:auto 1fr;column-gap:28px;align-items:start}
	.has-upgrades>.sys-desc-spec{grid-area:spec}
	.has-upgrades>.sys-desc-old{grid-area:old}
	.has-upgrades>.sys-upgrade-box{grid-area:box;align-self:start;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain}
	.admin-bar .has-upgrades>.sys-upgrade-box{top:56px;max-height:calc(100vh - 80px)}
}

/* Below 1024px: the panel becomes a bottom sheet (scroll-locked page, swipe/Esc/back to close). */
@media(max-width:1023px){
	.upg-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
	.upg-sheet{position:fixed;inset:0;z-index:100050;display:block;visibility:hidden;pointer-events:none;transition:visibility 0s linear .28s}
	.upg-sheet.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
	.upg-sheet-backdrop{display:block;position:absolute;inset:0;background:rgba(33,28,56,.45);opacity:0;transition:opacity .28s ease}
	.upg-sheet.is-open .upg-sheet-backdrop{opacity:1}
	.upg-sheet-inner{position:absolute;inset-inline:0;inset-block-end:0;max-block-size:86vh;max-block-size:86dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -12px 40px rgba(33,28,56,.22);transform:translateY(100%);transition:transform .28s ease}
	.upg-sheet.is-open .upg-sheet-inner{transform:translateY(0)}
	.upg-panel{padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:0}
	.upg-panel-head{position:sticky;top:0;z-index:2;flex-wrap:wrap;padding:6px 0 8px;background:#fff}
	.upg-sheet-grip{display:block;flex:0 0 100%;inline-size:44px;block-size:5px;margin:2px auto 4px;border-radius:3px;background:var(--c-border,#ddd6f3);flex-basis:44px;margin-inline:calc(50% - 22px)}
	.upg-panel-done{position:sticky;bottom:0;box-shadow:0 -10px 16px #fff}
	html.upg-sheet-lock,html.upg-sheet-lock body{overflow:hidden}
	.upg-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
	.sys-upgrade-box{padding:16px 14px;border-radius:var(--radius,14px)}.sys-upg-heading{font-size:16px}
	.upg-tiles,.upg-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(max-width:359px){.upg-choices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.upg-card,.upg-check,.upg-tile,.upg-sheet,.upg-sheet-inner,.upg-sheet-backdrop{transition:none}.upg-tile:hover{transform:none}}
.sys-upg-note{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius,14px);background:var(--c-bg-soft,#f7f6fb);font-size:13px;line-height:1.9;color:var(--c-text,#211c38)}
.sys-upg-admin-note{background:#fff7ed;color:#9a3412;border:1px dashed #fdba74}