/* ============================================================
   AOE Centre — the store pages  (0903w)
   store.html · store-subjects.html · store-streams.html ·
   store-inside.html, plus the "not sure yet?" row on prices.html.

   Every class is prefixed st- so nothing here reaches another
   page. Colours come from the shared variables, so dark mode
   follows without a second set of rules.
   ============================================================ */
:root{ --st-mute:#6A6255; --st-tint:rgba(223,205,131,.16); }
html[data-theme="dark"]{ --st-mute:#B3AA98; --st-tint:rgba(223,205,131,.12); }

/* both languages ship in the page; one of them is shown */
[data-g="zh"]{display:none}
body.sh-zh [data-g="en"]{display:none}
body.sh-zh [data-g="zh"]{display:inline}

.hero h1 span[data-g]{color:#F5F2EA}
.st-gold{font-style:normal;color:#DFCD83}

/* ---------- the numbered rules in a hero ---------- */
.st-rules{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;
          border-top:1px solid rgba(245,242,234,.28)}
.st-rules > div{padding:20px 22px 4px 0}
.st-rules > div + div{padding-left:22px;border-left:1px solid rgba(245,242,234,.28)}
.st-rules .n{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
             color:#DFCD83;display:block;margin-bottom:8px}
.st-rules p{font-size:15px;line-height:1.6;color:rgba(245,242,234,.9);max-width:34ch}
@media(max-width:820px){
  .st-rules{grid-template-columns:1fr}
  .st-rules > div + div{padding-left:0;border-left:0;border-top:1px solid rgba(245,242,234,.22)}
}

/* ---------- the picker bar ---------- */
.st-bar{background:var(--panel);border-bottom:1px solid var(--rule);position:relative;z-index:30}
@media(min-width:901px){.st-bar{position:sticky;top:72px}}
.st-bar .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;
              padding-top:15px;padding-bottom:15px}
.st-set{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-set > .lb{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
              text-transform:uppercase;color:var(--st-mute)}
.st-seg{display:flex;flex-wrap:wrap;gap:6px}
.st-seg button{font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:8px 15px;
               background:transparent;border:1px solid var(--rule);border-radius:999px;
               color:var(--ink);line-height:1.2}
.st-seg button small{display:block;font-weight:400;font-size:11px;color:var(--st-mute);
                     font-family:"IBM Plex Mono",monospace;letter-spacing:.08em;margin-top:2px}
.st-seg button:hover{border-color:var(--gold-deep)}
.st-seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2B2721}
.st-seg button[aria-pressed="true"] small{color:rgba(43,39,33,.7)}

.st-main{padding:44px 0 80px}

/* ---------- a titled block ---------- */
.st-block{margin-bottom:44px}
.st-head{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;
         border-bottom:2px solid var(--ink)}
.st-head h2{font-size:22px}
.st-head .meta{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
               letter-spacing:.14em;text-transform:uppercase;color:var(--st-mute);text-align:right}
.st-say{font-size:15.5px;line-height:1.7;margin-top:14px;max-width:66ch}
.st-say + .st-say{margin-top:12px}
.st-note{font-size:14px;line-height:1.65;color:var(--st-mute);margin-top:14px;max-width:66ch}
.st-note a{color:var(--gold-deep)}
.st-kick{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
         text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}

/* ---------- the four hub cards ---------- */
.st-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.st-cards > *{min-width:0}
@media(max-width:760px){.st-cards{grid-template-columns:1fr}}
.st-card{display:block;min-width:0;text-decoration:none;color:inherit;background:var(--panel);
         border:1px solid var(--rule);border-left:3px solid var(--gold-deep);
         padding:22px 24px 20px;position:relative}
.st-card:hover{border-color:var(--gold-deep)}
.st-card .n{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
            color:var(--gold-deep);display:block;margin-bottom:9px}
.st-card h3{font-family:"Marcellus",serif;font-size:21px;font-weight:400;line-height:1.25;margin:0}
.st-card p{font-size:14.5px;line-height:1.6;color:var(--st-mute);margin-top:9px;max-width:44ch}
.st-card .go{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;
             color:var(--gold-deep);border-bottom:1px solid currentColor}
.st-card.wide{grid-column:1 / -1;background:var(--st-tint)}

/* ---------- a price table ---------- */
.st-tablewrap{overflow-x:auto;max-width:100%;margin-top:16px;
              -webkit-overflow-scrolling:touch}
.st-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.st-table th{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--st-mute);font-weight:500;text-align:right;
             padding:0 0 10px 16px;border-bottom:1px solid var(--rule)}
.st-table th.l{text-align:left;padding-left:0}
.st-table td{padding:14px 0 14px 16px;text-align:right;border-bottom:1px solid var(--rule);
             font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.st-table td.l{text-align:left;padding-left:0;font-family:"Karla",sans-serif}
.st-table tr.off td{opacity:.72}
.st-table .nm{font-family:"Marcellus",serif;font-size:18px;display:flex;align-items:baseline;
              gap:9px;flex-wrap:wrap}
.st-table .code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
                color:var(--gold-deep)}
.st-table .in{font-size:12.5px;color:var(--st-mute);margin-top:5px;line-height:1.5;
              font-family:"Karla",sans-serif}
.st-table .big{font-family:"Marcellus",serif;font-size:21px}
.st-table .per{font-size:11px;color:var(--st-mute);display:block;margin-top:3px}
.st-table td.win{color:#2F6B47;font-weight:700}
html[data-theme="dark"] .st-table td.win{color:#7FC08F}
.st-table td.ceil{background:var(--st-tint);font-weight:700}
.st-tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
        text-transform:uppercase;color:var(--st-mute);border:1px solid var(--rule);
        padding:4px 9px;border-radius:999px;white-space:nowrap}

/* ---------- a bulleted list of what you get ---------- */
.st-list{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:14px}
.st-list > div{border-top:1px solid var(--rule);padding:13px 0 13px 22px;position:relative;
               font-size:14.5px;line-height:1.6}
.st-list > div:before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;
                      border-radius:50%;border:1.5px solid var(--gold-deep)}
.st-list > div b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:16.5px;
                 margin-bottom:3px}
@media(max-width:720px){.st-list{grid-template-columns:1fr}}

/* ---------- a plain step list ---------- */
.st-steps{counter-reset:st;margin-top:16px}
.st-steps > li{list-style:none;position:relative;padding:0 0 18px 44px;font-size:15px;
               line-height:1.65}
.st-steps > li:before{counter-increment:st;content:counter(st,decimal-leading-zero);
                      position:absolute;left:0;top:1px;font-family:"IBM Plex Mono",monospace;
                      font-size:11px;letter-spacing:.14em;color:var(--gold-deep);
                      border:1px solid var(--rule);border-radius:999px;padding:4px 8px}
.st-steps > li b{font-weight:700}

/* ---------- the Pass panel ---------- */
.st-pass{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--gold-deep);
         padding:24px 26px;margin-top:20px}
.st-pass h3{font-family:"Marcellus",serif;font-size:24px;font-weight:400;margin:4px 0 0}
.st-pass .say{font-size:14.5px;line-height:1.6;color:var(--st-mute);margin-top:8px;max-width:56ch}
.st-passrow{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:18px}
.st-passrow .big{font-family:"Marcellus",serif;font-size:40px;line-height:1;
                 font-variant-numeric:tabular-nums}
.st-passrow .per{font-size:12.5px;color:var(--st-mute);font-family:"IBM Plex Mono",monospace;
                 padding-bottom:5px}
.st-live{margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--st-mute);
         background:var(--st-tint);padding:12px 15px}

/* ---------- the call to action ---------- */
.st-cta{background:var(--panel);border:1px solid var(--rule);padding:24px 26px;margin-top:34px;
        display:flex;align-items:center;gap:20px 26px;flex-wrap:wrap}
.st-cta .txt{flex:1;min-width:260px}
.st-cta h3{font-family:"Marcellus",serif;font-size:21px;font-weight:400;margin:0}
.st-cta p{font-size:14.5px;line-height:1.6;color:var(--st-mute);margin-top:7px;max-width:52ch}
.st-btn{display:inline-block;text-decoration:none;font:inherit;font-weight:700;font-size:15.5px;
        padding:14px 22px;background:var(--gold);border:1px solid var(--gold);color:#2B2721;
        border-radius:1px;text-align:center}
.st-btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream)}
.st-btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.st-btn.ghost:hover{background:var(--ink);color:var(--cream)}

/* ---------- the row of onward links ---------- */
.st-more{margin-top:46px}
.st-more-lb{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
            text-transform:uppercase;color:var(--st-mute);padding-bottom:10px;
            border-bottom:2px solid var(--ink)}
.st-more-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px}
@media(max-width:900px){.st-more-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.st-more-row{grid-template-columns:1fr}}
.st-more-row a{display:block;min-width:0;text-decoration:none;color:inherit;padding:16px 0;
               border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.55;
               color:var(--st-mute)}
.st-more-row a b{display:block;font-family:"Marcellus",serif;font-weight:400;font-size:17px;
                 color:var(--ink);margin-bottom:5px}
.st-more-row a:hover b{color:var(--gold-deep)}

.st-nojs{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--gold-deep);
         padding:18px 20px;margin-bottom:26px;font-size:15px;line-height:1.65}

/* the phone bottom bar needs room under everything */
body.has-tabs{padding-bottom:74px}

/* ---------- 0906a: keyboard focus (UI-IDEAS #6) ----------
   The picker is a row of buttons a student may well tab through.
   One ring, on :focus-visible only, in the shared accent. */
.st-seg button:focus-visible,
.st-card:focus-visible,
.st-btn:focus-visible,
.st-more-row a:focus-visible{outline:2px solid var(--accent,#A08C42);outline-offset:2px}
@supports selector(:focus-visible){
  .st-seg button:focus:not(:focus-visible){outline:none}
}