:root {
  --soft-surface:#f2e7da;
  --soft-raised:4px 5px 12px #50341f16,-4px -4px 10px #fffdf9b8;
  --soft-pressed:inset 3px 3px 7px #50341f20,inset -3px -3px 7px #fff9ee;
}

.btn,.text-button,.site-menu summary {
  border-radius:999px;
  touch-action:manipulation;
  transition:transform .2s cubic-bezier(.2,.75,.25,1),background-color .2s,color .2s,box-shadow .2s;
}
.btn {
  border:1px solid #211b17;
  background:#211b17;
  color:#fff9f0;
  box-shadow:4px 5px 12px #211b1726,inset 0 1px #fff2;
}
.btn:hover {
  border-color:#9a4021;
  background:#9a4021;
  color:#fff9f0;
  box-shadow:5px 7px 14px #71311538,inset 0 1px #fff4;
}
.btn:active {
  transform:scale(.97);
  box-shadow:inset 2px 2px 8px #211b1750;
}
.text-button,.site-menu summary {
  background:var(--soft-surface);
  color:#743218;
  border:1px solid #dfd0be;
  box-shadow:var(--soft-raised);
  min-height:36px;
  padding:6px 13px;
}
.site-menu summary{min-height:44px;padding:6px 11px}
.text-button:hover,.site-menu summary:hover {background:#f5e3d4;color:#6d2b13}
.text-button:active,.text-button[aria-pressed=true],.site-menu[open] summary {
  box-shadow:var(--soft-pressed);
  background:#ecdece;
}
.text-button:disabled {box-shadow:none}
.site-menu-panel,.checkout-panel,.admin-panel,.pack-option {
  border-radius:16px;
  box-shadow:var(--soft-raised);
}
.site-menu-panel {right:12px;width:min(calc(100% - 24px),340px);margin-top:6px}
.pack-option:has(:checked) {box-shadow:var(--soft-pressed)}
.lookbook-store .fav,.lookbook-store .add {
  border-radius:50%;
  transition:background-color .2s,box-shadow .2s;
}
.lookbook-store .fav:hover {background:#f2e7da;box-shadow:var(--soft-raised)}
.lookbook-store .fav:active,.lookbook-store .add:active {box-shadow:var(--soft-pressed)}
@media (hover:hover) and (pointer:fine) {
  .btn:hover:not(:active) {transform:translateY(-2px)}
}
@media(max-width:640px) {
  .text-button {min-height:40px}
  .bag-controls {gap:8px}
}
@media(prefers-reduced-motion:reduce) {
  .btn,.text-button,.site-menu summary,.lookbook-store .fav,.lookbook-store .add {transition:none}
  .btn:hover,.btn:active {transform:none}
}