/* The subject page's file list (the site builder's; the Look lives in site.css).
 * Each half is one <details class="fh">; inside it one row (.fr) per product with small
 * pill links (.fpill), then the week list folded in its own <details class="wk-box">.
 * Tokens only: every colour comes from site.css's :root, so both plates and the
 * subject's accent carry over. Tap targets are the <a>, 44px; the pill drawn inside is
 * smaller (.fp-in). */

.halves{display:grid;gap:18px;margin:22px 0 18px}
@media (min-width:760px){.halves{grid-template-columns:1fr 1fr;align-items:start}}

.fh{border-radius:22px;box-shadow:inset 0 3px 0 var(--acc),inset 0 1px 1px var(--glass-inset);scroll-margin-top:80px}
.fh-s{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;
  padding:18px 18px 16px;min-height:56px;border-radius:22px}
.fh-s::-webkit-details-marker{display:none}
.fh-s::marker{content:""}
.fh-s:hover .fh-h{color:var(--acc)}
.fh-t{display:flex;flex-direction:column;min-width:0}
.fh .fh-h{margin:0;display:block}
.fh-sub{color:var(--bone);font-size:13.5px;line-height:1.45}
.fh-b{grid-column:1;grid-row:2;justify-self:start;display:flex}
.fh-s>.chev{grid-column:2;grid-row:1 / span 2;align-self:center}
.chev{width:22px;height:22px;color:var(--acc);transition:rotate .25s cubic-bezier(.22,.61,.36,1)}
details[open]>summary>.chev{rotate:180deg}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
.fh-body{padding:0 18px 18px}
@media (min-width:760px){.fh-s{padding:22px 26px 18px}.fh-body{padding:0 26px 22px}}

/* one row per product */
.frs{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--hair)}
.fr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:6px 0 6px 2px;
  border-bottom:1px solid var(--hair)}
.fr-ic{width:24px;height:24px;color:var(--acc);stroke-width:1.4;vertical-align:0}
.fr-t{display:flex;flex-direction:column;min-width:0}
.fr-l{font-weight:600;font-size:16px;line-height:1.3}
.fr-n{font-size:12.5px;line-height:1.45;color:var(--bone)}
.fr-a{display:flex;align-items:center;gap:2px}
.fr-lock{display:inline-flex;color:var(--bone);margin-right:4px}
.fr-lock .ic{width:16px;height:16px;vertical-align:0}
.fr.is-off .fr-ic,.fr.is-off .fr-l{color:var(--bone)}
.fr.is-off .fr-ic{opacity:.7}

/* the pill: a 44px target around a small drawn pill */
.fpill{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 1px;
  color:var(--star);text-decoration:none;border-radius:999px}
.fp-in{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding:0 11px;border-radius:999px;
  border:1px solid var(--acc-line);background:var(--acc-soft);font-size:13px;font-weight:600;letter-spacing:.05em;line-height:1;white-space:nowrap;
  transition:scale .25s cubic-bezier(.22,.61,.36,1),border-color .2s,background-color .2s}
html[data-lang=th] .fp-in{letter-spacing:0}
a.fpill:hover .fp-in{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,var(--void));scale:1.05}
a.fpill:active .fp-in{scale:.95}
a.fpill:focus-visible{outline:none}
a.fpill:focus-visible .fp-in{outline:2px solid var(--acc);outline-offset:2px}
.fpill.off{min-height:0;min-width:0;cursor:default}
.fpill.off .fp-in{background:transparent;border:1px dashed var(--bone);color:var(--bone);font-weight:500;letter-spacing:0;font-size:12.5px}
@media (prefers-reduced-motion:reduce){.fp-in{transition:none}a.fpill:hover .fp-in,a.fpill:active .fp-in{scale:none}}

/* the half's message: free, paid-but-empty, coming */
.fh-note{font-size:14px;line-height:1.55;background:var(--acc-soft);border-left:3px solid var(--acc);padding:10px 12px;margin:0 0 12px;border-radius:0 8px 8px 0}

/* the week list, folded */
.wk-box{margin:4px 0 0}
.wk-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;font-weight:600;font-size:15px}
.wk-s::-webkit-details-marker{display:none}
.wk-s::marker{content:""}
.wk-s:hover{color:var(--acc)}
.wk-s .chev{width:18px;height:18px}
.wk-box .weeks{margin-top:4px}

.fh .buy-row{margin:16px 0 2px}

/* the countdown (assets/countdown.js): one line, the week, a thin accent line */
.cd{margin:0 0 14px}
.cd-t{margin:0;font-weight:600;font-size:15px;line-height:1.4}
.cd-w{font-weight:400;font-size:13px;color:var(--bone)}
.cd-t{margin-bottom:6px}
.cd-n{margin:6px 0 0;font-size:12.5px;color:var(--bone)}
.cd-bar{display:block;height:2px;border-radius:2px;background:var(--hair);overflow:hidden}
.cd-bar>span{display:block;height:100%;background:var(--acc)}