/* HTB floor build-up. Selectors are prefixed and doubled up so Elementor's kit button
   styles (which target every <button>) never leak in. Colours read the Elementor globals
   first and fall back to the dark palette. */

.htb-bu-wrap{display:grid;gap:32px}

/* drawing */
.htb-bu-art{min-width:0}
.htb-bu-art .htb-bu-svg{display:block;width:100%;max-width:520px;height:auto;margin-inline:auto;overflow:visible}
.htb-bu-art .htb-bu-layer{transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.htb-bu-art .htb-bu-svg.has-active .htb-bu-layer.is-below{opacity:.5}
.htb-bu-art .htb-bu-svg.has-active .htb-bu-layer.is-above{opacity:.1;transform:translateY(-26px)}
.htb-bu-art .htb-bu-svg.has-active .htb-bu-layer.is-active{opacity:1;transform:translateY(-8px)}
.htb-bu-art .htb-bu-tag circle{fill:#ECE8E1;transition:fill .15s}
.htb-bu-art .htb-bu-tag text{font:600 14px "IBM Plex Mono",ui-monospace,Menlo,monospace;fill:#23282C}
.htb-bu-art .htb-bu-layer.is-active .htb-bu-tag circle{fill:#D2A878}

/* list */
.htb-bu{color:#ECE8E1}
.htb-bu .htb-bu__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.htb-bu .htb-bu__list li{margin:0;padding:0}
.htb-bu .htb-bu__list .htb-bu__btn{
  width:100%;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;
  min-height:52px;margin:0;padding:10px 14px;border-radius:10px;
  border:1px solid rgba(236,232,225,.16);background:transparent;box-shadow:none;
  color:#ECE8E1;font:500 16px/1.3 "Hanken Grotesk",system-ui,sans-serif;
  letter-spacing:0;text-transform:none;text-decoration:none;text-align:left;white-space:normal;cursor:pointer;
  transition:background-color .15s,border-color .15s}
.htb-bu .htb-bu__list .htb-bu__btn:hover{background:transparent;color:#ECE8E1;border-color:rgba(236,232,225,.45)}
.htb-bu .htb-bu__list .htb-bu__btn[aria-pressed="true"]{background:rgba(210,168,120,.14);border-color:#D2A878;color:#ECE8E1}
.htb-bu .htb-bu__list .htb-bu__btn:focus{outline:none}
.htb-bu .htb-bu__list .htb-bu__btn:focus-visible{outline:3px solid #D2A878;outline-offset:2px}
.htb-bu .htb-bu__num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#ECE8E1;color:#23282C;font:600 13px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace}
.htb-bu .htb-bu__btn[aria-pressed="true"] .htb-bu__num{background:#D2A878}
.htb-bu .htb-bu__size{font:400 14px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;color:#A8A399;white-space:nowrap}
.htb-bu .htb-bu__detail{margin:16px 0 0;min-height:78px;font:400 17px/26px "Hanken Grotesk",system-ui,sans-serif;color:#ECE8E1}

@media (max-width:480px){
  .htb-bu .htb-bu__list .htb-bu__btn{font-size:15px;gap:10px;padding:10px 12px}
  .htb-bu .htb-bu__detail{min-height:104px}
}
@media (prefers-reduced-motion:reduce){
  .htb-bu-art .htb-bu-layer{transition:none}
  .htb-bu-art .htb-bu-svg.has-active .htb-bu-layer.is-active,
  .htb-bu-art .htb-bu-svg.has-active .htb-bu-layer.is-above{transform:none}
}