/* Optional commerce stays inside the existing scrollable shop. */
#shop-commerce { display:flex; flex-direction:column; gap:14px; width:100%; color:#eee9ff; text-align:left; }
#shop-commerce[hidden], #shop-commerce [hidden] { display:none !important; }
.commerce-card { border:1px solid #b8a1ee40; border-radius:16px; padding:14px; background:#191127; }
.commerce-card h3 { margin:0 0 6px; font:700 17px/1.3 var(--ui-font); color:#faf7ff; }
.commerce-card p { margin:6px 0 10px; font:500 13px/1.55 var(--ui-font); color:#cfc3e8; word-break:keep-all; overflow-wrap:break-word; }
#shop-commerce button, #shop-commerce summary { min-height:44px; font:600 14px/1.4 var(--ui-font); }
.commerce-action { width:100%; display:block; padding:11px 12px; border:1px solid #83e4cb80; border-radius:11px; background:#24453e; color:#e4fff6; }
.commerce-action:disabled { color:#b6accb; border-color:#9c8bb840; background:#292035; cursor:default; }
#commerce-price { display:block; margin:8px 0; font:600 14px/1.45 var(--ui-font); color:#eee5ff; }
.commerce-card details { margin:10px 0; border-top:1px solid #b8a1ee30; }
.commerce-card summary { display:list-item; padding:12px 0 8px; cursor:pointer; color:#e8ddff; }
.commerce-card h4 { margin:10px 0 8px; font:600 13px/1.4 var(--ui-font); color:#cfc3e8; }
.commerce-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.commerce-option { min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:8px; border:1px solid #a899c04d; border-radius:10px; background:#22182f; color:#eee9ff; text-align:left; }
.commerce-option[aria-pressed="true"] { border-color:#83e4cb; }
.commerce-option:disabled { color:#c8bfdb; cursor:default; }
.commerce-option small { font:500 11px/1.4 var(--ui-font); color:#c8bfdb; }
.commerce-swatch { height:42px; border-radius:6px; border:1px solid #cbbaf03d; display:flex; align-items:center; justify-content:center; font-size:27px; line-height:1; color:#c6aaff; overflow:hidden; }
.commerce-trail-classic { color:#aadfdb; }
.commerce-trail-rings { color:#e3c7ff; }
.commerce-links { display:flex; flex-wrap:wrap; gap:4px 12px; }
.commerce-link { padding:10px 0; border:0; background:none; color:#cfc0ff; text-decoration:underline; text-underline-offset:3px; text-align:left; }
.commerce-link:disabled { color:#a397b8; }
#commerce-status { margin:0; min-height:0; color:#ded3f5; font:500 13px/1.5 var(--ui-font); }
#commerce-status:empty { display:none; }
#shop-commerce button:focus-visible, #shop-commerce summary:focus-visible { outline:2px solid #b9ffdf; outline-offset:3px; }