/* builder.css — "Load the Trailer" quote builder (owner: builder agent).
 * Everything lives under [data-mount="builder"] > .hb, plus two body-level
 * helpers (.hb__ghost while dragging, .hb__float for the "+$38" pop).
 */

.hb { --hb-tile: 64px; --squat: 0px; display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 24px; align-items: start; }
.hb__palette { grid-row: 1 / 3; }
.hb *, .hb *::before, .hb *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- palette */
.hb__palette { display: flex; flex-direction: column; max-height: 720px; min-height: 480px; overflow: hidden; padding: 14px; }
.hb__search { position: relative; margin-bottom: 10px; }
.hb__search input {
  width: 100%; min-height: 44px; padding: 0 14px 0 40px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font: 500 16px/1 var(--font-body); appearance: none;
}
.hb__search input:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(242, 106, 27, .18); }
.hb__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; color: var(--ink-soft); }
.hb__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hb__tab {
  border: 2px solid transparent; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer;
  padding: 7px 11px; font: 700 13px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background .15s, color .15s;
}
.hb__tab:hover { background: rgba(19, 35, 63, .06); color: var(--ink); }
.hb__tab[aria-selected="true"] { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.hb__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; overflow-y: auto; padding: 4px 4px 12px; margin: -4px;
  overscroll-behavior: contain; scrollbar-width: thin;
}
.hb__tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: grab;
  text-align: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s;
}
@media (hover: hover) { .hb__tile:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 4px 0 var(--navy); } }
.hb__tile:active { cursor: grabbing; transform: translateY(1px); box-shadow: none; }
.hb__tile.is-source { opacity: .45; transform: none; box-shadow: none; }
.hb__tile.is-pulse .hb__tile-art { animation: hb-pop .35s var(--ease-out); }
.hb__tile[hidden] { display: none; }
.hb__tile-art { width: 56px; height: 56px; pointer-events: none; }
.hb__tile-art svg, .hb__tile-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hb__tile-name { font: 700 13px/1.15 var(--font-label); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.hb__tile-price { font: 600 12px/1 var(--font-body); color: var(--ink-soft); pointer-events: none; }
.hb__tile-fee {
  position: absolute; top: -8px; right: -6px; padding: 3px 6px; border-radius: 999px; background: var(--orange); color: var(--white);
  border: 2px solid var(--navy); font: 800 10px/1 var(--font-label); letter-spacing: .04em; pointer-events: none;
}
.hb__tile-qty {
  position: absolute; top: -8px; left: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--dino);
  color: var(--white); border: 2px solid var(--navy); font: 800 12px/18px var(--font-label); pointer-events: none;
}
.hb__tile-qty:empty { display: none; }
.hb__empty { grid-column: 1 / -1; padding: 24px 8px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.hb__hintline { margin: 10px 0 0; font: 500 13px/1.3 var(--font-body); color: var(--ink-soft); text-align: center; }

/* --------------------------------------------------------------- stage */
.hb__stage { display: grid; gap: 14px; min-width: 0; }
.hb__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb__quick-label { font: 700 13px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.hb__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 8px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--navy); background: var(--surface); color: var(--navy); font: 700 13px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--navy); transition: transform .12s, box-shadow .12s;
}
.hb__chip svg, .hb__chip img { width: 22px; height: 22px; }
@media (hover: hover) { .hb__chip:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--navy); } }
.hb__chip:active, .hb__chip.is-pouring { transform: translateY(3px); box-shadow: none; }

/* scene */
.hb__scene {
  position: relative; aspect-ratio: 2 / 1; width: 100%; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(79, 168, 199, .14), rgba(79, 168, 199, .04) 60%, rgba(19, 35, 63, .05));
  border: 2px dashed transparent; transition: border-color .2s, background .2s; touch-action: pan-y;
}
.hb__ctas .btn[hidden] { display: none; }
.hb__ctas.is-located .btn { grid-column: 1 / -1; }
.hb__scene.is-over { border-color: var(--orange); background: linear-gradient(180deg, rgba(242, 106, 27, .14), rgba(242, 106, 27, .05)); }
.hb__scene.is-over .hb__pile::before { content: ''; position: absolute; inset: -8px -6px 0; z-index: 5; border: 3px dashed var(--orange); border-radius: 12px; pointer-events: none; }
.hb__shadow { position: absolute; height: 14px; border-radius: 50%; background: rgba(19, 35, 63, .18); filter: blur(3px); pointer-events: none; }
.hb__rig { position: absolute; inset: 0; z-index: 2; transition: transform .78s cubic-bezier(.5, 0, .9, .4); }
.hb__rig.is-leaving { transform: translateX(120%); }
.hb__rig.is-parked { transition: none; transform: translateX(-120%); }
.hb__rig.is-arriving { transition: transform .72s cubic-bezier(.2, .8, .3, 1.08); transform: translateX(0); }
.hb__rig.is-swapping { animation: hb-swap .45s var(--ease); }
.hb__body { position: absolute; inset: 0; transform: translateY(var(--squat)); transition: transform .5s var(--ease-out); isolation: isolate; }
.hb__truck { position: absolute; left: 30%; bottom: 6%; width: 67%; height: auto; aspect-ratio: 1600 / 545; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hb__truck--front { pointer-events: none; z-index: 3; }  /* bed wall + tailgate + cab paint over the pile */
.hb__wheel { position: absolute; z-index: 4; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; transform-origin: 50% 50%; will-change: transform; }
.hb__rig.is-leaving .hb__wheel, .hb__rig.is-arriving .hb__wheel { animation: hb-spin .42s linear infinite; }
.hb__bedhit { position: absolute; }
.hb__pile { position: absolute; z-index: 2; }  /* its own stacking context: item z-indexes never escape above the wall */
.hb__pile.is-falling .hb__junk { animation: hb-fall .75s var(--ease) forwards; animation-delay: calc(var(--i) * 30ms); }
.hb__junk {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: transparent; cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transform: translate(var(--x), var(--y)) rotate(var(--r)); transform-origin: 50% 80%;
  transition: transform .9s cubic-bezier(.3, .7, .3, 1), opacity .3s; will-change: transform;
  filter: drop-shadow(0 3px 0 rgba(19, 35, 63, .25));
}
.hb__junk > svg, .hb__junk > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hb__junk:hover { filter: drop-shadow(0 3px 0 rgba(19, 35, 63, .25)) brightness(1.06); }
.hb__junk:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 10px; }
.hb__junk.is-lifted { opacity: .25; }
.hb__junk.is-landing { animation: hb-land 1.25s cubic-bezier(.25, .6, .3, 1) both; transition: none; }
.hb__junk.is-landing-fly { animation: hb-fly 1.5s cubic-bezier(.3, .5, .3, 1) both; transition: none; }
.hb__junk.is-gone { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.3); pointer-events: none; }
.hb__junk.is-wiggle { animation: hb-wiggle .5s var(--ease); }
.hb__hint {
  position: absolute; left: 30%; width: 40%; top: 9%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
  text-align: center; font: 400 clamp(20px, 3.4vw, 30px)/1.1 var(--font-script); color: var(--navy); opacity: .85; transition: opacity .2s;
}
.hb__hint svg { width: 28px; height: 28px; animation: hb-bob 1.4s ease-in-out infinite; }
.hb__hint.is-hidden { opacity: 0; }
.hb__dinohost { position: absolute; pointer-events: none; z-index: 1; }
.hb__shadow--dino { z-index: 0; }
.hb__dinohost .hsdino, .hb__dinohost img { position: absolute; left: 0; top: 0; }
.hb__bubble {
  position: absolute; left: 2%; top: 4%; max-width: 46%; padding: 8px 12px; z-index: 4; border-radius: 14px; border: 3px solid var(--navy);
  background: var(--white); color: var(--navy); font: 400 clamp(16px, 2.4vw, 22px)/1.1 var(--font-script); box-shadow: 0 3px 0 var(--navy);
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s, transform .25s var(--ease-out); pointer-events: none; z-index: 3;
}
.hb__bubble::after { content: ''; position: absolute; left: 22px; bottom: -12px; width: 14px; height: 14px; background: var(--white); border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); transform: rotate(45deg); }
.hb__bubble.is-on { opacity: 1; transform: none; }

/* popover on a loaded item */
.hb__pop {
  position: absolute; z-index: 5; width: 210px; padding: 10px; border-radius: var(--radius); border: var(--outline); background: var(--surface);
  color: var(--navy); box-shadow: var(--shadow); transform: translate(-50%, calc(-100% - 12px)); animation: hb-pop .2s var(--ease-out);
}
.hb__pop::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--surface); border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); transform: rotate(45deg); }
.hb__pop-name { font: 700 15px/1.1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.hb__pop-meta { font: 500 12px/1.3 var(--font-body); color: var(--ink-soft); margin: 2px 0 8px; }
.hb__pop-row { display: flex; align-items: center; gap: 6px; }
.hb__pop-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--navy); background: var(--cream); color: var(--navy); cursor: pointer;
  font: 800 20px/1 var(--font-label); display: grid; place-items: center;
}
.hb__pop-btn:hover { background: var(--cream-200); }
.hb__pop-qty { flex: 1; text-align: center; font: 800 18px/1 var(--font-label); }
.hb__pop-rm { margin-top: 8px; width: 100%; min-height: 34px; border-radius: 999px; border: 2px solid var(--navy); background: var(--navy); color: var(--cream); cursor: pointer; font: 700 12px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.hb__pop-rm:hover { background: var(--navy-700); }

/* "extinct" drop zone shown while dragging out of the bed */
.hb__extinct {
  position: absolute; left: 50%; bottom: -14px; transform: translate(-50%, 120%); z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  border-radius: 999px; border: 3px dashed var(--navy); background: var(--cream); color: var(--navy); font: 700 14px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: transform .25s var(--ease-out), opacity .2s, background .15s; pointer-events: none;
}
.hb__extinct svg { width: 26px; height: 26px; }
.hb__scene.is-bed-drag .hb__extinct { opacity: 1; transform: translate(-50%, 0); }
.hb__extinct.is-over { background: var(--orange); color: var(--white); border-style: solid; }

/* meta row: gauge + trips */
.hb__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.hb__gauge { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.hb__gauge-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; flex: 1; height: 16px; padding: 2px; border: 2px solid var(--navy); border-radius: 999px; background: var(--surface); }
.hb__gauge-seg { border-radius: 999px; background: transparent; transition: background .25s, transform .25s; }
.hb__gauge-seg.is-on { background: var(--dino); }
.hb__gauge-seg.is-on.is-hot { background: var(--orange); }
.hb__gauge-seg.is-on.is-max { background: var(--orange-600); }
.hb__gauge-label { font: 800 14px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; min-width: 88px; }
.hb__gauge-label small { display: block; margin-top: 3px; font: 500 12px/1 var(--font-body); color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.hb__trips { display: flex; align-items: center; gap: 6px; }
.hb__trip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 2px solid var(--navy); background: var(--surface); color: var(--navy);
  cursor: pointer; font: 700 12px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
}
.hb__trip svg { width: 18px; height: 18px; }
.hb__trip[aria-selected="true"] { background: var(--navy); color: var(--cream); }
.hb__trip-note { font: 500 12px/1.2 var(--font-body); color: var(--ink-soft); }

/* --------------------------------------------------------------- price */
.hb__price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; padding: 18px 22px; align-items: center; }
.hb__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hb__total-label { font: 700 13px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); width: 100%; }
.hb__odo { display: inline-flex; font: 400 clamp(40px, 5vw, 56px)/1 var(--font-display); color: var(--navy); letter-spacing: .02em; }
.hb__odo-d { display: inline-block; height: 1em; overflow: hidden; width: .64em; text-align: center; }
.hb__odo-strip { display: block; transition: transform .55s cubic-bezier(.3, .9, .3, 1); will-change: transform; }
.hb__odo-strip i { display: block; height: 1em; font-style: normal; }
.hb__odo.is-bump { animation: hb-bump .35s var(--ease-out); }
.hb__range { font: 500 15px/1.2 var(--font-body); color: var(--ink-soft); }
.hb__range strong { color: var(--navy); font-weight: 700; }
.hb__lines { grid-column: 1 / -1; display: grid; gap: 4px; margin: 0; padding: 12px 0 0; border-top: 2px dashed var(--line); list-style: none; font: 500 14px/1.35 var(--font-body); }
.hb__line { display: flex; justify-content: space-between; gap: 12px; }
.hb__line span:last-child { font-weight: 700; white-space: nowrap; }
.hb__line--soft { color: var(--ink-soft); }
.hb__line--warn { color: var(--fate-landfill); font-weight: 600; }
.hb__ctas { display: grid; gap: 8px; justify-items: stretch; min-width: 220px; }
.hb__loc { font: 500 13px/1.3 var(--font-body); color: var(--ink-soft); text-align: center; }
.hb__loc a, .hb__loc button { color: var(--sea); font: inherit; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.hb__dump {
  display: inline-flex; align-items: center; gap: 6px; justify-self: center; background: none; border: 0; padding: 4px 8px; cursor: pointer;
  color: var(--ink-soft); font: 700 12px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; border-radius: 999px;
}
.hb__dump:hover { color: var(--fate-landfill); background: rgba(181, 70, 42, .08); }
.hb__dump svg { width: 18px; height: 18px; }
.hb__dump[disabled] { opacity: .35; pointer-events: none; }
.hb__count { font: 600 13px/1 var(--font-body); color: var(--ink-soft); }
.hb__more { display: none; }

/* ------------------------------------------------ body-level helpers */
.hb__ghost {
  position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 12px 10px rgba(19, 35, 63, .35));
}
.hb__ghost-in { display: block; animation: hb-wobble 1.2s ease-in-out infinite; transform-origin: 50% 20%; }
.hb__ghost-in svg, .hb__ghost-in img { width: 100%; height: 100%; display: block; }
.hb__ghost.is-return { transition: transform .32s var(--ease); }
.hb__ghost.is-poof { animation: hb-poof .35s var(--ease) forwards; }
.hb__float {
  position: fixed; z-index: 401; pointer-events: none; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 999px;
  background: var(--navy); color: var(--white); border: 2px solid var(--orange); font: 800 18px/1 var(--font-label); letter-spacing: .04em;
  box-shadow: 0 3px 0 var(--orange-600); animation: hb-float 1.15s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hb__float--zero { background: var(--surface); color: var(--navy); font-size: 14px; }
body.hb-dragging { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
body.hb-dragging * { cursor: grabbing !important; }

/* ---------------------------------------------------------- keyframes */
@keyframes hb-land {
  0% { transform: translate(calc(var(--x) + var(--fx)), calc(var(--y) + var(--fy))) rotate(var(--r)) scale(1.06); }
  45% { transform: translate(var(--x), calc(var(--y) - 22px)) rotate(var(--r)) scale(1.04); }
  82% { transform: translate(var(--x), calc(var(--y) + 3px)) rotate(var(--r)) scale(1.02, .97); }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
@keyframes hb-fly {
  0% { transform: translate(calc(var(--x) + var(--fx)), calc(var(--y) + var(--fy))) rotate(-8deg) scale(.92); }
  38% { transform: translate(calc(var(--x) + var(--fx) * .3), calc(var(--y) - 120px)) rotate(4deg) scale(1.04); }
  58% { transform: translate(var(--x), calc(var(--y) - 30px)) rotate(var(--r)) scale(1.03); }
  86% { transform: translate(var(--x), calc(var(--y) + 3px)) rotate(var(--r)) scale(1.02, .97); }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
@keyframes hb-fall { to { transform: translate(calc(var(--x) + 40px), calc(var(--y) + 420px)) rotate(calc(var(--r) + 120deg)); opacity: 0; } }
@keyframes hb-pop { from { transform: scale(.7); opacity: 0; } }
@keyframes hb-bump { 30% { transform: scale(1.06); } }
@keyframes hb-bob { 50% { transform: translateY(8px); } }
@keyframes hb-spin { to { transform: rotate(360deg); } }
@keyframes hb-swap { 0% { opacity: 0; transform: translateX(-24px); } 100% { opacity: 1; transform: none; } }
@keyframes hb-wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes hb-poof { to { transform: scale(.2) rotate(30deg); opacity: 0; } }
@keyframes hb-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
@keyframes hb-wiggle { 25% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) - 8deg)); } 75% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) + 8deg)); } }

/* reduced motion */
.hb--rm .hb__junk, .hb--rm .hb__rig, .hb--rm .hb__body, .hb--rm .hb__odo-strip { transition: none; }
.hb--rm .hb__junk.is-landing, .hb--rm .hb__junk.is-landing-fly, .hb--rm .hb__ghost-in, .hb--rm .hb__hint svg, .hb--rm .hb__wheel { animation: none !important; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hb { grid-template-columns: 290px minmax(0, 1fr); gap: 18px; }
  .hb__price { grid-template-columns: 1fr; }
  .hb__ctas { min-width: 0; grid-template-columns: 1fr 1fr; }
  .hb__loc, .hb__dump { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hb { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; --hb-tile: 56px; }
  .hb__stage { position: sticky; top: calc(var(--header-h) + 6px); z-index: 20; order: 0; gap: 8px; background: var(--bg); padding-bottom: 6px; }
  .hb__quick { order: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); }
  .hb__quick::-webkit-scrollbar { display: none; }
  .hb__quick-label { white-space: nowrap; }
  .hb__chip { flex-shrink: 0; }
  .hb__palette { grid-row: auto; order: 3; max-height: none; min-height: 0; padding: 12px 12px 10px; }
  .hb__scene { border-radius: var(--radius); }
  .hb__hint { font-size: 15px; white-space: nowrap; gap: 0; }
  .hb__hint svg { width: 20px; height: 20px; }
  .hb__meta { gap: 6px 10px; }
  .hb__gauge { flex-basis: 100%; }
  .hb__gauge-label { min-width: 70px; font-size: 12px; }
  .hb__gauge-label small { display: none; }
  .hb__trips { flex-wrap: wrap; }
  .hb__price { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; gap: 4px 10px; }
  .hb__total { gap: 2px 8px; }
  .hb__total-label { font-size: 11px; }
  .hb__odo { font-size: 34px; }
  .hb__range { font-size: 12px; width: 100%; }
  .hb__ctas { min-width: 0; grid-template-columns: 1fr; }
  .hb__ctas > [data-route-btn], .hb__ctas > .hb__loc, .hb__ctas > .hb__dump { display: none; }
  .hb__ctas .btn { min-height: 42px; font-size: 13px; padding: 0 14px; }
  .hb__price details { grid-column: 1 / -1; }
  .hb__lines { padding-top: 6px; font-size: 13px; }
  .hb__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; }
  .hb__more .hb__loc { flex: 1; text-align: left; }
  .hb__more .hb__dump { margin-left: auto; }
  .hb__price details summary { cursor: pointer; font: 700 12px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sea); list-style: none; padding: 4px 0; }
  .hb__price details summary::-webkit-details-marker { display: none; }
  .hb__loc, .hb__dump { grid-column: 1 / -1; }
  .hb__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 8px; padding: 0 12px; }
  .hb__tabs::-webkit-scrollbar { display: none; }
  .hb__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 92px;
    overflow-x: auto; overflow-y: hidden; margin: 0 -12px; padding: 10px 12px 12px; gap: 8px; scroll-snap-type: x proximity; scrollbar-width: thin;
    overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  }
  .hb__tile { scroll-snap-align: start; padding: 8px 4px 6px; }
  .hb__tile-art { width: 48px; height: 48px; }
  .hb__extinct { bottom: -8px; font-size: 12px; padding: 8px 14px; }
}
@media (min-width: 761px) {
  .hb__price details > summary { display: none; }
  .hb__price details[open] > summary { display: none; }
}
@media (max-width: 400px) {
  .hb__grid { grid-auto-columns: 84px; }
  .hb__odo { font-size: 32px; }
}