/* gift boxes */
.gifts { background: var(--red); color: var(--cream); padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 9vw, 120px); }
.gifts .section-head p:last-child { opacity: .95; }
.boxes { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; color: var(--ink); }
.boxes__track { display: flex; gap: clamp(14px, 2vw, 24px); width: max-content; padding: 20px var(--gutter) 34px; }
.boxes::-webkit-scrollbar { display: none; }
.has-cursor .boxes { cursor: none; }
.box-card {
  flex: 0 0 clamp(272px, 27vw, 340px); scroll-snap-align: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column;
}
.box-card__stage { aspect-ratio: 1.08; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 8%; border-bottom: 2px solid var(--ink); }
.box-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.box-card__ship { display: inline-block; align-self: flex-start; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--butter); border: 2px solid var(--ink); margin: -4px 0 14px; }
.gifts__hint { text-align: center; font-family: var(--hand); font-size: 26px; margin: 0; }

.gbox { position: relative; width: 68%; aspect-ratio: 1; }
.gbox__items { position: absolute; left: 6%; right: 6%; bottom: 34%; height: 60%; z-index: 1; }
.gbox__item { position: absolute; bottom: 0; width: 46%; transform: translateX(-50%) rotate(var(--r)); filter: drop-shadow(0 8px 6px rgba(30, 22, 56, .3)); }
.gbox__base {
  position: absolute; left: 7%; right: 7%; bottom: 0; height: 50%; z-index: 2;
  background: var(--base); border: 2px solid var(--ink); border-radius: 8px 8px 14px 14px;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .14);
}
.gbox__lid {
  position: absolute; left: 2%; right: 2%; bottom: 48%; height: 16%; z-index: 3;
  background: var(--base); border: 2px solid var(--ink); border-radius: 9px;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .14);
}
.gbox.is-open .gbox__lid { bottom: 80%; left: 30%; right: -14%; transform: rotate(16deg); }
.gbox__ribbon { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 15%; transform: translateX(-50%); background: var(--ribbon); border-inline: 2px solid var(--ink); }
.gbox__bow { position: absolute; left: 50%; bottom: 88%; width: 52%; height: 90%; transform: translateX(-50%); }
.gbox__bow::before, .gbox__bow::after {
  content: ''; position: absolute; bottom: 0; width: 50%; height: 100%;
  background: var(--ribbon); border: 2px solid var(--ink); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.gbox__bow::before { left: 2%; transform: rotate(-28deg); transform-origin: 100% 100%; }
.gbox__bow::after { right: 2%; transform: rotate(28deg); transform-origin: 0 100%; }
.gbox__tag {
  position: absolute; z-index: 4; left: 50%; bottom: 12%; transform: translateX(-50%) rotate(-4deg);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px;
  font-weight: 800; font-size: 13px; white-space: nowrap;
}

/* custom order */
.custom { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.custom__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.custom__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.custom__intro > p { font-size: 1.08em; }
.custom__steps { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.custom__steps li { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.custom__steps b { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--cobalt); color: var(--cream); display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: 20px; }
.custom__art { position: relative; height: 170px; }
.custom__art span { position: absolute; width: 130px; filter: drop-shadow(0 12px 10px rgba(30, 22, 56, .25)); }
.custom__art span:nth-child(1) { left: 0; top: 10px; transform: rotate(-10deg); }
.custom__art span:nth-child(2) { left: 130px; top: 30px; transform: rotate(6deg); width: 150px; }
.custom__art span:nth-child(3) { left: 280px; top: 0; transform: rotate(-4deg); }
.custom-form {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 44px); box-shadow: 0 8px 0 var(--ink); display: grid; gap: 20px;
}
.custom-form h3 { font-family: var(--display); font-size: clamp(28px, 3.2vw, 40px); line-height: 1; }
.custom-form fieldset { border: 0; padding: 0; margin: 0; }
.custom-form legend { font-weight: 800; font-size: 15px; margin-bottom: 10px; padding: 0; }
.custom-form .swatch { width: 38px; height: 38px; }
.upload {
  display: grid; justify-items: center; gap: 8px; text-align: center; cursor: pointer;
  padding: 26px 18px; border: 3px dashed var(--ink); border-radius: 22px; background: var(--cream);
  font-weight: 500; transition: background-color .2s, transform .2s;
}
.upload:hover, .upload.is-over { background: var(--candy); }
.upload.is-over { transform: scale(1.02); }
.upload:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.upload__icon { width: 52px; height: 52px; }
.upload__text b { font-weight: 800; }
.upload small { font-weight: 700; }
.upload__previews { display: flex; flex-wrap: wrap; gap: 10px; }
.upload__previews:empty { display: none; }
.upload__thumb { position: relative; margin: 0; width: 88px; height: 88px; border-radius: 14px; border: 2px solid var(--ink); overflow: hidden; box-shadow: var(--pop); }
.upload__thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload__remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.chip--size { display: inline-flex; flex-direction: column; justify-content: center; min-height: 58px; line-height: 1.15; padding: 6px 16px; }
.chip--size small { font-weight: 600; opacity: .75; }
.grid-2--size { grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 960px) {
  .custom__inner { grid-template-columns: 1fr; }
  .custom__intro { position: static; }
  .custom__art { display: none; }
}
@media (max-width: 640px) { .grid-2--size { grid-template-columns: 1fr; } }