/* /jual.html and the catalogue: compact world band, catalogue toolbar, Akun Game strip, sell steps, rules, form section.
   Tokens only (tokens.css). Loaded after home.css, which supplies cards, state panel, chips and the sell form. */

/* band */
.pagehead{position:relative;background:var(--night);color:var(--ink-inv)}
.pagehead-world{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,17vw,248px);grid-template-areas:"h1 art" "lead art";column-gap:clamp(24px,4vw,56px);row-gap:0;align-items:end;padding-block:28px 20px}
.pagehead-world.has-btn{grid-template-areas:"h1 art" "lead art" "btn art"}
.pagehead-world>*{min-width:0}
.pagehead-world h1{grid-area:h1;font-weight:800;font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em;max-width:none;text-wrap:balance;}
.pagehead h1:focus{outline:none}
.pagehead h1:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.pagehead-world .lead{grid-area:lead;margin-top:16px;max-width:46.85em;font-size:var(--fs-lead);color:var(--ink-inv-2)}
.pagehead-world .btn{grid-area:btn;justify-self:start;margin-top:20px}
.band-art{grid-area:art;align-self:end;justify-self:end;width:100%;max-width:184px;min-width:0}
.band-art .vm{width:100%;height:auto;position:relative;z-index:1;display:block}
.band-art .band-isl{display:block;width:110%;max-width:none;height:auto;margin:-14% 0 0 -5%}
.pagehead .edge{width:100%;height:clamp(28px,3.4vw,48px);display:block;transform:scaleY(-1);margin-bottom:-1px}
.pagehead--to-forest .edge{fill:var(--forest)}
.pagehead--to-paper .edge{fill:var(--paper)}
.night .edge--forest{fill:var(--forest)}
@media (max-width:700px){
  .pagehead-world,.pagehead-world.has-btn{grid-template-columns:minmax(0,1fr) 84px;column-gap:16px;padding-block:24px 16px}
  .pagehead-world{grid-template-areas:"h1 h1" "lead art"}
  .pagehead-world.has-btn{grid-template-areas:"h1 h1" "lead art" "btn btn"}
  .pagehead-world .lead{margin-top:14px}
  .pagehead-world .btn{justify-self:stretch;margin-top:20px}
}

/* catalogue */
.acc--page{padding-block:clamp(32px,4vw,56px) clamp(56px,7vw,96px)}
.cat-area{min-width:0}
.cat-area:has(#product-scroll[aria-busy="true"]),.cat-area:has(#product-error:not([hidden])){min-height:calc(100vh - 120px)}
.toolbar{background:var(--forest-2);border-radius:var(--r-card);padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:28px}
.tb-row{display:flex;flex-wrap:wrap;gap:16px}
.tb-row>*{min-width:0}
.tb-f{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;flex:1 1 140px;align-content:start}
.tb-q{flex:1 1 100%}
.tb-f label,.tb-sort-l{font:700 .9375rem/1.3 var(--font-body);color:var(--paper)}
.toolbar .input:focus{box-shadow:none;border-color:var(--paper)}
.toolbar .input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.toolbar input[type="search"]{appearance:none;-webkit-appearance:none}
.toolbar .input[disabled]{opacity:1}
.tb-row2{align-items:center;gap:12px 16px}
.sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:1 1 100%}
.sort-btns{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.sort-btn{touch-action:manipulation;flex:1 1 7em;min-width:0;width:auto;max-width:100%;box-sizing:border-box;white-space:normal;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--mint-tint);color:var(--ink);font:700 .9375rem/1 var(--font-body);cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.sort-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--mint)}}
.sort-btn:active{transform:translateY(1px) scale(.98);box-shadow:0 2px 0 0 var(--mint);transition-duration:var(--t-press)}
.sort-btn[aria-pressed="true"]{background:var(--mint)}
.sort-btn[aria-pressed="true"]::before{content:"";flex:none;width:14px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath fill='%230B2A24' d='M0 2h1v2H0zM1 3h1v2H1zM2 3h1v2H2zM3 2h1v2H3zM4 1h1v2H4zM5 0h1v2H5zM6 0h1v1H6z'/%3E%3C/svg%3E") center/contain no-repeat}
.sort-btn:disabled{background:var(--sold);color:var(--ink-2);cursor:not-allowed;transform:none;box-shadow:none}
.sort-btn:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
/* AC11: stacked pills (container <= 12em) keep the label inside the content box at 160px; the container only exists <= 700px */
@media (max-width:700px){
  .sort-btns{container:sortbtns / inline-size}
  @container sortbtns (max-width:12em){.sort-btn{padding-inline:10px}}
}
/* UI-06: under 600px the label sits on its own line, then Termurah / Termahal side by side (auto-fit stacks them only when the toolbar is tiny, e.g. 160px) */
@media (max-width:599px){
  .sort{display:grid;gap:8px}
  .sort-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(7.5em,100%),1fr));gap:8px}
  .sort-btn{flex:none}
}
.count{min-height:24px;margin:0;font-weight:700;color:var(--paper)}
.tb-clear{margin-left:auto}
.tb-clear[hidden]{display:none}
@media (min-width:701px){
  .toolbar{padding:24px}
  .tb-q{flex:2 1 320px}
  .tb-f{flex:1 1 180px}
  .sort{flex:0 0 auto}
  .sort-btn{flex:0 0 auto;min-width:max-content}
  .count{margin-left:auto}
  .tb-clear{margin-left:0}
}
.cat-noscript{margin-bottom:28px}
.cat-noscript p{margin-top:6px}

/* REKBER strip */
.remind{background:var(--paper);padding-block:clamp(56px,7vw,96px)}
.remind-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.remind-grid>*{min-width:0}
.remind-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.remind-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.remind-list .pix{width:44px;height:44px}
.fee-box{background:var(--paper-2);border-radius:var(--r-card);padding:24px;display:grid;gap:12px;justify-items:start}
.fee-box h3{font-size:1.25rem;line-height:1.25}
.fee-box p{max-width:33.67em}
.fee-box .btn{margin-top:4px}
.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);font-weight:700;text-underline-offset:4px}
@media (max-width:900px){.remind-grid{grid-template-columns:minmax(0,1fr)}}

/* jual: steps */
.sell-how{background:var(--paper);padding-block:clamp(48px,6vw,96px)}
.sell-how .sec-head p{color:var(--ink-2)}
.sell-tl{list-style:none;margin:0;padding:0;max-width:66rem}
.tl-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 15rem;column-gap:clamp(20px,3vw,40px);padding-bottom:clamp(28px,3vw,40px)}
.tl-step:last-child{padding-bottom:0}
.tl-step:not(:last-child)::before{content:"";position:absolute;left:26px;top:56px;bottom:0;width:4px;background:var(--mint)}
.tl-num{width:56px;height:56px;border-radius:var(--r-tile);display:grid;place-items:center;font:800 1.5rem/1 var(--font-head);background:var(--paper-2);color:var(--ink)}
.tl-step:nth-child(3) .tl-num,.tl-step:nth-child(4) .tl-num{background:var(--forest);color:var(--paper)}
.tl-step:nth-child(5) .tl-num{background:var(--orange);color:var(--night)}
.tl-body{min-width:0}
.tl-body h3{font-size:var(--fs-h3);line-height:1.25;margin-top:14px}
.tl-body p{margin-top:8px;font-size:var(--fs-body);max-width:36em;color:var(--ink)}
.tl-money{flex-direction:column;align-items:flex-start;margin-top:12px}
.tl-money .chip{white-space:normal;min-height:32px;padding-block:5px}
.sell-after{margin-top:28px;max-width:49.78em}
.sell-after .text-link{display:inline-flex}
@media (max-width:760px){
  .tl-step{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
  .tl-num{width:44px;height:44px;font-size:1.25rem}
  .tl-step:not(:last-child)::before{left:20px;top:44px}
  .tl-body h3{margin-top:9px}
  .tl-money{grid-column:2;flex-direction:row;flex-wrap:wrap}
}

/* jual: form section */
.sell--forest{background:var(--forest);color:var(--ink-inv);--focus:var(--orange);padding-block:clamp(48px,6vw,96px)}
.sell--forest .sell-intro h2{color:var(--paper)}
.sell--forest .sell-intro>p{color:var(--ink-on-forest)}
.sell--forest .rules{background:var(--forest-2);color:var(--ink-on-forest);padding:24px}
.sell--forest .rules h3{color:var(--paper);font-size:1.0625rem}
.sell--forest .rules a{color:var(--paper);font-weight:700;text-underline-offset:3px}
.form-shell{color:var(--ink);min-width:0}
.help{margin-top:28px}
.help h3{color:var(--paper);font-size:1.125rem}
.help p{margin-top:8px;color:var(--ink-on-forest);max-width:33.67em}
.help-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:12px}
.help-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-weight:700;text-underline-offset:4px}

.toolbar select.input{padding-left:12px;padding-right:34px;background-position:right 12px center;font-size:.9375rem}

.toolbar .input{min-width:0;max-width:100%}
.tl-body h3,.tl-body p,.tl-body .chip{overflow-wrap:anywhere}