/* ============================================================
   CUSTOMISE A HAMPER — thirty drawn boxes with lids that open
   Every box here is built from CSS, not a photograph. That is
   what lets a lid actually lift when you point at it.
   ============================================================ */
.box-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.box-pick{
  border:1px solid var(--line);background:#fff;border-radius:var(--r);
  padding:18px 12px 14px;cursor:pointer;text-align:center;font:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.box-pick:hover,.box-pick:focus-visible{
  border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-3px);outline:none;
}
/* every card gives the art the same room, so the names line up */
.box-pick .hbox{height:158px;padding-bottom:14px;box-sizing:border-box}
.box-meta{display:block;line-height:1.35}
.box-meta b{display:block;font-size:.95rem}
.box-meta small{display:block;color:var(--ink-soft);font-size:.76rem}
.box-meta em{display:block;color:var(--ink-soft);font-size:.74rem;font-style:normal;opacity:.85;margin-top:2px}

/* ---------- the box itself ---------- */
.hbox{
  --w:112px; --h:88px; --lidh:17px;
  width:var(--w);height:calc(var(--h) + 26px);
  display:grid;place-items:end center;
  animation:hfloat 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.31s);
}
@keyframes hfloat{50%{transform:translateY(-5px)}}
.hbox-stage{
  position:relative;width:var(--w);height:var(--h);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.hbox-body{
  position:absolute;inset:auto 0 0 0;height:calc(100% - 6px);
  background:linear-gradient(150deg,var(--c1),var(--c2));
  border-radius:6px;
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.18), 0 8px 14px -6px rgba(43,26,22,.45);
  z-index:1;
}
/* the dark opening, and three things rising out of it.
   Closed, it has no height at all, so no dark seam can show. */
.hbox-mouth{
  position:absolute;left:9%;right:9%;top:10px;height:0;
  background:linear-gradient(#160d0b,#2b1a16);border-radius:0 0 4px 4px;
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:0 6px;
  transition:height .34s cubic-bezier(.2,.8,.3,1.1);
  z-index:2;
}
.hbox-mouth span{
  flex:1;max-width:16px;border-radius:3px 3px 0 0;margin-bottom:3px;
  background:linear-gradient(#fff4e0,#e6c98f);
  height:0;transition:height .34s cubic-bezier(.2,.9,.3,1.2);
}
.hbox-mouth span:nth-child(2){background:linear-gradient(#ffd9e2,#d98aa0)}
.hbox-mouth span:nth-child(3){background:linear-gradient(#d8f0d2,#87b87a)}
.hbox-band{
  position:absolute;left:0;right:0;bottom:0;height:calc(100% - 6px);
  border-radius:6px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 7px),var(--rb) calc(50% - 7px),var(--rb) calc(50% + 7px),transparent calc(50% + 7px)),
    linear-gradient(0deg,transparent calc(38% - 6px),var(--rb) calc(38% - 6px),var(--rb) calc(38% + 6px),transparent calc(38% + 6px));
  opacity:.92;z-index:1;
}
.hbox-lid{
  position:absolute;left:-5%;right:-5%;top:-4px;height:var(--lidh);
  background:linear-gradient(160deg,var(--lid),var(--c2));
  border-radius:5px;
  box-shadow:0 4px 8px -3px rgba(43,26,22,.5);
  transform-origin:20% 100%;
  transition:transform .34s cubic-bezier(.2,.8,.3,1.1);
  z-index:4;
}
.hbox-bow{
  position:absolute;left:50%;top:-7px;width:16px;height:12px;transform:translateX(-50%);
  background:var(--rb);
  border-radius:50% 50% 40% 40%;
  box-shadow:-9px 1px 0 -2px var(--rb), 9px 1px 0 -2px var(--rb);
}

/* open — on hover, or forced open in the builder */
.box-pick:hover .hbox-lid,
.box-pick:focus-visible .hbox-lid,
.hbox.open .hbox-lid{ transform:translateY(-150%) rotate(-13deg); }
.box-pick:hover .hbox-mouth,
.box-pick:focus-visible .hbox-mouth,
.hbox.open .hbox-mouth{ height:44% }
.box-pick:hover .hbox-mouth span,
.box-pick:focus-visible .hbox-mouth span,
.hbox.open .hbox-mouth span{ height:62% }
.box-pick:hover .hbox-mouth span:nth-child(2){height:82%}
.box-pick:hover .hbox-mouth span:nth-child(3){height:52%}
.box-pick:hover .hbox-stage{transform:translateY(-4px)}

/* ---------- sizes ---------- */
.hbox.size-sm{--w:86px;--h:70px;--lidh:14px}
.hbox.size-md{--w:112px;--h:88px;--lidh:17px}
.hbox.size-lg{--w:136px;--h:104px;--lidh:20px}
.hbox.size-xl{--w:156px;--h:118px;--lidh:23px}

/* ---------- shapes ---------- */
.hbox.shape-slab{--h:calc(var(--w) * .52)}
.hbox.shape-tower{--w:74px;--h:124px}
.hbox.shape-tower.size-sm{--w:62px;--h:104px}

.hbox.shape-round .hbox-body,
.hbox.shape-round .hbox-band{border-radius:44% 44% 14px 14px / 22% 22% 8px 8px}
.hbox.shape-round .hbox-lid{border-radius:50%/70% 70% 34% 34%;height:calc(var(--lidh) + 5px)}
.hbox.shape-round .hbox-mouth{left:12%;right:12%;border-radius:50%/40% 40% 0 0}

.hbox.shape-hex .hbox-body,
.hbox.shape-hex .hbox-band{clip-path:polygon(15% 0,85% 0,100% 20%,100% 100%,0 100%,0 20%)}
.hbox.shape-hex .hbox-body{
  background:
    linear-gradient(90deg,rgba(0,0,0,.14) 0 14%,transparent 14% 86%,rgba(0,0,0,.14) 86% 100%),
    linear-gradient(150deg,var(--c1),var(--c2));
}
.hbox.shape-hex .hbox-lid{
  height:calc(var(--lidh) + 3px);
  clip-path:polygon(0 42%,13% 0,87% 0,100% 42%,100% 100%,0 100%);
}
.hbox.shape-hex .hbox-mouth{left:20%;right:20%;top:14px}

.hbox.shape-trunk .hbox-body,
.hbox.shape-trunk .hbox-band{border-radius:16px 16px 5px 5px}
.hbox.shape-trunk .hbox-lid{border-radius:50% 50% 6px 6px / 85% 85% 6px 6px;height:calc(var(--lidh) + 7px)}

.hbox.shape-crate .hbox-body{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 13px),
    linear-gradient(150deg,var(--c1),var(--c2));
}
.hbox.shape-crate .hbox-lid{
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 11px),
             linear-gradient(160deg,var(--lid),var(--c2));
}

.hbox.shape-weave .hbox-body{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 4px, transparent 4px 9px),
    linear-gradient(150deg,var(--c1),var(--c2));
  border-radius:5px 5px 10px 10px;
}
.hbox.shape-weave .hbox-lid{
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 4px, transparent 4px 9px),
             linear-gradient(160deg,var(--lid),var(--c2));
}

.hbox.shape-tin .hbox-body,
.hbox.shape-tin .hbox-band{border-radius:40% 40% 16px 16px / 18% 18% 9px 9px}
.hbox.shape-tin .hbox-body{
  background:linear-gradient(100deg,var(--c2) 0%,var(--c1) 26%,rgba(255,255,255,.55) 42%,var(--c1) 58%,var(--c2) 100%);
}
.hbox.shape-tin .hbox-lid{
  border-radius:50%/72% 72% 30% 30%;height:calc(var(--lidh) + 4px);
  background:linear-gradient(100deg,var(--c2),var(--lid) 40%,rgba(255,255,255,.6) 52%,var(--c2));
}
.hbox.shape-tin .hbox-mouth{left:14%;right:14%}

/* the drawer pulls forward rather than the lid coming off */
.hbox.shape-drawer .hbox-lid{transform-origin:50% 100%}
.box-pick:hover .hbox.shape-drawer .hbox-lid,
.hbox.shape-drawer.open .hbox-lid{transform:translateY(-30%) rotate(-3deg)}
.hbox.shape-drawer .hbox-body{border-radius:4px}
.hbox.shape-drawer .hbox-mouth{
  left:6%;right:6%;top:auto;bottom:6px;height:0;border-radius:3px;
  transition:transform .34s cubic-bezier(.2,.8,.3,1.1), height .34s;
}
.box-pick:hover .hbox.shape-drawer .hbox-mouth,
.hbox.shape-drawer.open .hbox-mouth{height:46%;transform:translateY(24%) scale(1.03)}

/* ---------- the builder ---------- */
.build{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
.build-box{position:sticky;top:86px}
.build-boxart{display:grid;place-items:center;padding:14px 0 6px;min-height:175px;background:var(--sand);border-radius:var(--r)}
.build-boxart .hbox{animation:none}
.build-boxart .hbox-lid{transform:translateY(-150%) rotate(-13deg)}
.build-boxart .hbox-mouth{height:44%}
.build-boxart .hbox.shape-drawer .hbox-lid{transform:translateY(-30%) rotate(-3deg)}
.build-boxart .hbox.shape-drawer .hbox-mouth{height:46%;transform:translateY(24%) scale(1.03)}
.build-boxart.has-items .hbox-mouth span{height:70%}
.build-boxart.has-items .hbox-mouth span:nth-child(2){height:88%}
.build-boxart.has-items .hbox-mouth span:nth-child(3){height:58%}
.build-boxart.drop .hbox-stage{animation:hdrop .4s ease}
@keyframes hdrop{40%{transform:translateY(5px) scale(.985)}100%{transform:none}}

.cap{margin:14px 0 10px}
.cap-bar{height:7px;background:var(--sand);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.cap-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--brand));transition:width .3s}

.inbox{list-style:none;padding:0;margin:0 0 12px;max-height:300px;overflow-y:auto}
.inbox li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.inbox li.empty{color:var(--ink-soft);justify-content:center;padding:18px 0;border:0;font-size:.86rem}
.inbox img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:0 0 auto}
.inbox li span{flex:1;line-height:1.25}
.inbox li button{border:0;background:none;color:var(--bad);cursor:pointer;font-size:.9rem;padding:2px 4px}
.pickcard.in{border-color:var(--ok)}
.pickcard.in .thumb{outline:2px solid var(--ok);outline-offset:-2px}

@media(max-width:900px){
  .build{grid-template-columns:1fr}
  .build-box{position:static}
}
@media(hover:none){
  /* no mouse — show the lids half open so the idea reads straight away */
  .hbox .hbox-lid{transform:translateY(-115%) rotate(-9deg)}
  .hbox .hbox-mouth{height:40%}
  .hbox .hbox-mouth span{height:48%}
  .hbox.shape-drawer .hbox-mouth{height:46%;transform:translateY(24%) scale(1.03)}
  .hbox.shape-drawer .hbox-lid{transform:translateY(-30%) rotate(-3deg)}
}
@media(prefers-reduced-motion:reduce){
  .hbox{animation:none}
  .hbox-lid,.hbox-mouth,.hbox-mouth span,.hbox-stage{transition:none}
}