.commerce-sheet {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease;
}
.commerce-sheet.open { pointer-events:auto; opacity:1; }
.commerce-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(5,2,10,.48);
  backdrop-filter:blur(7px) saturate(.82);
}
.commerce-panel {
  position:relative;
  width:min(88vw,350px);
  padding:22px 20px 18px;
  border-radius:32px;
  color:#fff3e5;
  background:
    radial-gradient(circle at 50% 0,rgba(235,184,255,.2),transparent 42%),
    linear-gradient(155deg,rgba(52,29,71,.96),rgba(14,7,25,.98) 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 30px 90px rgba(7,2,14,.62),0 0 0 1px rgba(250,219,189,.12);
  transform:translateY(12px) scale(.96);
  transition:transform .22s cubic-bezier(.18,.82,.2,1);
}
.commerce-sheet.open .commerce-panel { transform:translateY(0) scale(1); }
.commerce-close {
  position:absolute;
  z-index:2;
  top:12px;
  right:12px;
  width:31px;
  height:31px;
  border:0;
  border-radius:50%;
  color:rgba(255,237,222,.68);
  background:rgba(255,255,255,.07);
  font:21px/1 Georgia,serif;
  cursor:pointer;
}
.commerce-catalog { display:grid; }
.commerce-product {
  display:grid;
  justify-items:center;
  gap:8px;
  padding:7px 4px 1px;
  text-align:center;
}
.commerce-symbol {
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border-radius:50%;
  color:#ffe4a6;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.62),transparent 16%),
    radial-gradient(circle,rgba(215,152,245,.44),rgba(57,27,76,.2) 58%,transparent 70%);
  box-shadow:0 0 34px rgba(225,172,255,.29),inset 0 0 24px rgba(255,236,218,.2);
  font:34px/1 Georgia,serif;
  text-shadow:0 0 13px rgba(255,235,190,.72);
}
.commerce-product h2 {
  margin:0;
  color:#fff0df;
  font:22px/1.05 Georgia,serif;
  letter-spacing:.04em;
}
.commerce-product p {
  max-width:270px;
  min-height:30px;
  margin:0 0 6px;
  color:rgba(255,239,229,.68);
  font-size:10px;
  line-height:1.45;
}
.commerce-product>button {
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:1fr auto 18px;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:0;
  border-radius:999px;
  color:#392643;
  background:linear-gradient(120deg,#fff0dd,#efc8e7 62%,#dcb8f2);
  box-shadow:inset 0 1px rgba(255,255,255,.84),0 10px 26px rgba(219,161,230,.2);
  cursor:pointer;
}
.commerce-product>button span { justify-self:start; font-size:8px; font-weight:800; letter-spacing:.16em; }
.commerce-product>button b { font:12px/1 Georgia,serif; }
.commerce-product>button i { font:25px/1 Georgia,serif; font-style:normal; }
.commerce-tier-list { width:100%; display:grid; gap:7px; margin-top:2px; }
.commerce-tier-list>button {
  min-height:55px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 16px;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:0;
  border-radius:18px;
  color:#fff1e4;
  background:linear-gradient(115deg,rgba(255,255,255,.11),rgba(162,104,187,.15));
  box-shadow:inset 0 0 0 1px rgba(255,226,202,.13),inset 0 1px rgba(255,255,255,.09);
  text-align:left;
  cursor:pointer;
}
.commerce-tier-list>button>span { display:grid; gap:3px; min-width:0; }
.commerce-tier-list>button b { font:11px/1 Georgia,serif; letter-spacing:.08em; }
.commerce-tier-list>button small { overflow:hidden; color:rgba(255,231,220,.5); font-size:6px; letter-spacing:.06em; text-overflow:ellipsis; white-space:nowrap; }
.commerce-tier-list>button strong { color:#f4cee9; font:10px/1 Georgia,serif; white-space:nowrap; }
.commerce-tier-list>button i { color:#f8d7ef; font:22px/1 Georgia,serif; font-style:normal; }
.commerce-tier-list>button:disabled { opacity:.48; }
.commerce-product.owned>button,.commerce-product>button:disabled {
  color:rgba(255,239,225,.62);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.commerce-product.unavailable p { min-height:0; }
.commerce-status {
  min-height:13px;
  margin:10px 2px 0;
  color:#eacbff;
  font-size:8px;
  line-height:1.35;
  text-align:center;
}
.commerce-status:empty { display:none; }
.commerce-status.error { color:#ffbfc4; }
.dorothy-access-mode {
  position:fixed;
  z-index:45;
  top:max(68px,calc(env(safe-area-inset-top) + 58px));
  right:12px;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:1px 5px;
  max-width:148px;
  padding:7px 10px;
  border:1px solid rgba(255,229,191,.26);
  border-radius:999px;
  color:rgba(255,239,221,.88);
  background:rgba(19,10,32,.48);
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 5px 18px rgba(8,2,17,.18);
  backdrop-filter:blur(10px) saturate(1.08);
  cursor:pointer;
}
.dorothy-access-mode[hidden] { display:none; }
.dorothy-access-mode span { grid-row:1/3; color:#f2cae9; font:14px/1 Georgia,serif; }
.dorothy-access-mode b { font:700 7px/1.05 Arial,sans-serif; letter-spacing:.16em; text-align:left; }
.dorothy-access-mode small { overflow:hidden; max-width:112px; color:rgba(245,225,217,.53); font:600 5px/1.2 Arial,sans-serif; letter-spacing:.08em; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.dorothy-access-mode.full { border-color:rgba(255,222,151,.48); background:rgba(43,22,54,.58); }
.dorothy-copyright {
  position:fixed;
  z-index:41;
  right:12px;
  bottom:calc(70px + env(safe-area-inset-bottom));
  color:rgba(255,237,220,.36);
  display:flex;
  align-items:center;
  gap:7px;
  font:500 6px/1 Arial,sans-serif;
  letter-spacing:.08em;
  pointer-events:auto;
}
.dorothy-copyright a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.dorothy-copyright a:focus-visible { color:#ffe8bd; outline:1px solid currentColor; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .commerce-sheet,.commerce-panel { transition:none; } }